Vue核心知识:computed、methods和watch的区别
Vue核心知识:computed、methods和watch的区别
作用机制上
- methods,watch 和 computed 都是以函数为基础的,但各自却都不同
- watch 和 computed 都是以 Vue 的依赖追踪机制为基础的,当某一个数据发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动
- methods 里面是用来定义函数的,它需要手动调用才能执行。而不像 watch 和 computed 那样,“自动执行”预先定义的函数,相比于 watch / compute;methods 不处理数据逻辑关系,只提供可调用的函数,类似储存函数的一个库
性质上
- methods 里面定义的是函数,仍然需要去调用它。
- computed 是计算属性,在使用上和 data 对象里的数据属性是同一类的,底层借助了Objcet.defineproperty方法提供的getter和Isetter.
- watch:类似于监听机制+事件机制,当被监视的属性变化时,回调函数自动调用,进行相关操作
加载顺序
1. computed
是在 HTML DOM 加载后马上执行的,如赋值; 计算后的属性将直接赋值到vue实例中
2. methods
页面渲染完成后,必须要有一定的触发条件才能执行,如点击事件,
3. watch
它用于观察 Vue 实例上的数据变动。
4. 默认加载的时候
先 computed 再 watch,不执行 methods;
5. 触发某一事件后
先 computed 再 methods 再到 watch,computed 计算属性是基于它们的依赖进行缓存的
区别
计算属性computed
-
定义:要用的属性不存在,要通过已有属性计算得来。
-
原理:底层借助了Objcet.defineproperty方法提供的getter和Isetter.
-
get函数什么时候执行?
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
-
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
-
备注:
- 计算属性最终会出现在vm上,直接读取使用即可。
- 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
-
一个计算属性里面可以完成各种复杂的逻辑,最终返回一个结果;计算属性可以依赖多个vue实例的数据,只要其中一个任何一个数据发生变化,计算属性就会重新执行,视图也会更新。除此之外,计算属性还可以依赖其他计算属性和其他实例的数据
应用场景:(一个数据受多个数据影响)字符串拼接,购物车商品结算
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{name}}</span>
</div>
`,
data: {
firstName: '张',
lastName: '三'
},
computed: {
name () {
return `${this.firstName} ${this.lastName}`
}
}
})
监听属性watch
监视属性watch:
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视!
- watch中的函数有两个参数,前者是newVal,后者是oldVal。
- watch中的函数是不需要调用的。
- 特殊情况下,watch无法监听到数组的变化,特殊情况就是说更改数组中的数据时,数组已经更改,但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100,this.$set(this.arr,0,100)-----修改arr第0项值为100。
- watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听。"obj.name"(){}------如果obj的属性太多,这种方法的效率很低,obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
应用场景:(一个数据影响多个数据)搜索框、表单输入、异步更新、动画
new Vue({
template: `
<div>
<p>FullName: {{fullName}}</p>
<p>FirsName: <input type="text" v-model="firstName"/></p>
</div>
`,
data: {
firstName: '张',
lastName: '三',
fullName: ' '
},
watch: {
firstName (newName, oldName) {
this.fullName = newName + ' ' + this.lastName
}
}
})