Vue中computed和watch的区别小结
梦之归途 人气:0区别:计算属性computed支持缓存,只有依赖数据发生改变,才会重新进行计算;不支持异步,当computed内有异步操作时无效,无法监听数据的变化。而监听属性watch不支持缓存,数据变,直接会触发相应的操作;支持异步。
一、Vue中computed和watch的区别
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个或多个数据(称它们为依赖数据)发生变化的时候,所有依赖这些数据的 “相关” 数据 “自动” 发生变化,也就是自动调用相关的函数去实现数据的变动。
二、computed计算属性
支持缓存,只有依赖数据发生改变,才会重新进行计算;如果函数所依赖的属性没有发生变化,从缓存中读取
必须有return返回
使用方法和data中的数据一样,但是类似一个执行方法
不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
computed是计算属性,也就是依赖某个值或者props通过计算得来的数据
computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化(依赖的数据可以是单个,也可以是多个)时,会重新调用getter来计算;
注意:就算data中没有直接声明要计算的变量,也可以直接在computed中写入,如下示例:
<p id="app"> {{fullName}} </p> <script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) </script>
计算属性默认只有getter,可以在需要的时候自己设定setter(所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例):
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } //这个时候在控制台直接运行【vm.fullName = ‘bibi wang'】,相应的firstName和lastName也会改变。
(2)watch
1、不支持缓存,数据变,直接会触发相应的操作;
2、支持异步操作;
3、watch是监听器,可以监听某一个数据,然后执行相应的操作;
4、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
5、watch的函数名必须和data中的数据名一致
6、watch中的函数有俩个参数,新旧
7、watch中的函数是不需要调用的
8、只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用
9、immediate:true 页面首次加载的时候做一次监听
var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (newVal,oldVal) { this.fullName = newVal + ' ' + this.lastName console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo }, lastName: function (newVal,oldVal) { this.fullName = this.firstName + ' ' + newVal console.log(newVal+'========='+oldVal)//Baraaaa=========Bar } } })
注意:如果data中没有相应的属性的话,是不能watch的,这点和computed不一样。
三、区别
1、功能:computed是计算属性,watch是监听一个值的变化而执行对应的回调
2、是否调用缓存:computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调
3、是否调用return:computed必须有;watch可以没有
4、使用场景:computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框
5、是否支持异步:computed函数不能有异步;watch可以
总结
- 当多个属性影响一个属性的时候,建议用computed
- 当一个值发生变化之后,会引起一系列的操作(改变其他属性值),这种情况就适合用watch
加载全部内容