问题总结
从作用机制上：
- methods，watch 和 computed 都是以函数为基础的，但各自却都不同
- watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动
- 对 methods：methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数
从性质上：
- methods 里面定义的是函数，仍然需要去调用它。
- computed 是计算属性，事实上和 data 对象里的数据属性是同一类的（使用上）。
- watch：类似于监听机制+事件机制
watch 和 computed 区别
- 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
- 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
- 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return
- watch擅长处理的场景：一个数据影响多个数据 -------搜索框。
- computed擅长处理的场景：一个数据受多个数据影响 -- 使用场景：当一个值受多个属性影响的时候--------购物车商品结算
watch：属性监听
- watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。
- watch中的函数有两个参数，前者是newVal，后者是oldVal。
- watch中的函数是不需要调用的。
- watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。"obj.name"(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
- 特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改arr第0项值为100。
- immediate:true 页面首次加载的时候做一次监听。
- 一个数据影响多个数据 --- 应用场景：搜索框、表单输入、异步更新、动画
computed：计算属性
- 据依赖关系进行缓存的计算，并且只在需要的时候进行更新。
- 一个计算属性里面可以完成各种复杂的逻辑，最终返回一个结果；计算属性可以依赖多个vue实例的数据，只要其中一个任何一个数据发生变化，计算属性就会重新执行，视图也会更新。除此之外，计算属性还可以依赖其他计算属性和其他实例的数据
- 一个数据受多个数据影响 ---- 购物车结算 受到单价 数量 还有是否被选中的影响
模板字符串拼接
import Vue from 'vue'
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{firstName + ' ' + lastName}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
}
})使用 computed
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{name}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
},
computed: {
name () {
return `${this.firstName} ${this.lastName}`
}
}
})使用 methods （ 结果和 computed 的一样 ）
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{name}}</span>
<span>Name: {{getName()}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
},
computed: {
name () {
return `${this.firstName} ${this.lastName}`
}
},
methods: {
getName () {
return `${this.firstName} ${this.lastName}`
}
}
})使用 computed 的好处：提高性能
当我们改变 number 时，整个应用会重新渲染，vue 会被数据重新渲染到 dom 中。
这时，如果我们使用 methods 方法，随着渲染，方法需要被重新调用。
而 computed 中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取，从而性能开销比较小。当新的值需要大量计算才能得到，缓存的意义就非常大。
如果 computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性 并不会重新计算，从而提升性能。
当我们拿到的值需要进行一定处理使用时，就可以使用 computed。
watch
监听 firstName 数据，并根据改变得到的新值，进行某些操作
new Vue({
template: `
<div>
<p>FullName: {{fullName}}</p>
<p>FirsName: <input type="text" v-model="firstName"/></p>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou',
fullName: ' '
},
watch: {
firstName (newName, oldName) {
this.fullName = newName + ' ' + this.lastName
}
}
})注意：
- 初始 fullName 是没有值的，只有当数据改变时，才会显示。因为watch 的方法默认是不会执行的，只有当监听数据变化，才会执行
- 不要在 computed 或 watch 中，去修改所依赖的数据的值，尤其是 computed；如果这样做，可能导致一个无线循环的触发
11.Math.random()随机生成0-1的数，包括0但是不包括1 Math.floor：向下取整。例如Math.floor（3.66666）=3
vm.arr.shift() : 删除arr数组的首个数据 vm.arr.push() ：将某个数据推入arr数组，放到末尾 this.persons.unshift(p)：将数组元素p放入数组persons，并且放到首位
pop():删除最后一个元素 splice():替换掉指定位置的某个元素 sort：对数组进行排序 revers():反转数组
12. indexOf() 方法在数组中搜索指定项目，并返回其位置。
搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。
如果未找到该项目，则 indexOf() 返回 -1。
如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
注释：1.第一项的位置为 0，第二项的位置为 1，依此类推。
2.空串返回0
13. filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
14.immediate:true; 立即执行,当刷新页面时会立即执行一次
15.vue.set(target，key，val)：向target里添加的key属性是val
例子：vue.set(学生,‘性别’,'男') 向学生里追加性别为男
vm.$set(target，key，val)与vue.set(target，key，val)一样
16.split函数是编程语言中使用的一种函数名称，它是指返回一个下标从零开始的一维 数组 ，split函数包含指定数目的子 字符串 。 必需的。 包含子字符串和分隔符的字符串表达式。 如果 expression 是一个长度为零的字符串 ("")， Split 则返回一个空数组，即没有元素和数据的数组。
17.ES6语法规则
浙公网安备 33010602011771号