Vue中computed和watch的区别
Posted ㅤ阿龙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中computed和watch的区别相关的知识,希望对你有一定的参考价值。
今天简单说一下computed和watch的区别。
先看代码,两者怎么实现的。
<div id="app">
<input type="text" v-model="firstName"><br>
<input type="text" v-model="lastName"><br>
<h2>fullName()</h2>
</div>
<script>
var app = new Vue(
el: '#app',
data:
firstName: '张',
lastName: '三',
fullName: '张三'
,
// watch 监视、监听,在此处定义监听器
// 作用:监视data中的数据变化
watch:
// 侦听器以函数的形式定义,函数名称就是监视的数据的名称,参数就是数据变化后的新值
firstName(val)
console.log(val);
this.fullName = val + this.lastName;
,
lastName(val)
console.log(val);
this.fullName = this.firstName + val;
)
//计算属性方式实现
var app = new Vue(
el: '#app',
data:
firstName: '张',
lastName: '三',
,
computed:
// 计算属性在某些场景下(此示例),要比侦听器代码精简。
fullName()
return this.firstName + this.lastName;
)
</script>
computed和watch的区别
1、computed是计算属性;watch是监听,监听data中的数据变化。
2、computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行。
3、computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作。
4、computed第一次加载时就监听;watch默认第一次加载时不监听。
- immediate 组件创建时刻执行与否
immediate: true,第一次加载时监听(默认为false)- deep 深度监听 不推荐使用(非常的消耗性能)
监听的属性是对象的话 不开启deep 对象子属性变化不会触发watch
开启了deep 对象内部所有子属性变化 都会触发watch
5、computed中的函数必须调用return;watch不是。
6、使用场景:
computed:一个属性受到多个属性影响,如:购物车商品结算。
watch:一个数据影响多条数据,如:搜索数据。
数据变化响应,执行异步操作,或高性能消耗的操作,watch为最佳选择。
Vue 中computed 和 watch 的区别
前言
在vue的项目中,我们时常会需要对data的改变做出处理,这时候就需要用到watch和computed这两个属性,既然都是数值改变触发改变的属性,他们之间又有什么异同呢?
computed
- computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果。
- 计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
- 通过计算出来的属性不需要调用直接可以在 DOM 里使用
例子
var vm = new Vue({
el: \'#app\',
data: {
message: \'red\'
},
template: `
<div> <p>我是原始值: "{{ message }}"</p> <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用 </div> `,
computed: {
// 计算属性的 getter computedMessage: function () {
// `this` 指向 vm 实例 return this.message.split(\'\').reverse().join(\'\')
}
}
})
结果:
我是原始值: "red"
我是计算属性的值: "der"
如果不使用计算属性,那么 message.split(\'\').reverse().join(\'\') 就会直接写到 template 里,那么在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算
所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性
watch
- 一个对象,键是 data 对应的数据,值是对应的回调函数。值也可以是方法名,或者包含选项的对象,当 data 的数据发生变化时,就会发生一个回调,他有两个参数,一个 val (修改后的 data 数据),一个 oldVal(原来的 data 数据)
Vue 实例将会在实例化时调用$watch()
,遍历 watch 对象的每一个属性
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div> <button @click="n += 1">n+1</button> <button @click="obj.a += \'hi\'">obj.a + \'hi\'</button> <button @click="obj = {a:\'a\'}">obj = 新对象</button> </div> `,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深 },
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用 }
}
}).$mount("#app");
注意:不应该使用箭头函数来定义 watcher 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例
- deep 控制是否要看这个对象里面的属性变化
- immediate 控制是否在第一次渲染是执行这个函数
- vm.$watch(\'data属性名\', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 变了");
},{deep: true, immediate: true})
两者区别
相同点:
两者都是观察页面数据变化的。
不同点:
- computed 只有当依赖的数据变化时才会计算, 会缓存数据。
- watch 每次都需要执行函数。watch 更适用于数据变化时的异步操作
总结
- 如果一个数据需要经过复杂计算就用 computed
- 如果一个数据需要被监听并且对数据做一些操作就用 watch
以上是关于Vue中computed和watch的区别的主要内容,如果未能解决你的问题,请参考以下文章