vue watch compute,Computed和watch的区别
本文主要介绍vue中computed和watch的区别，帮助你更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
计算属性computed：
支持缓存，只有当依赖数据发生变化时，才会重新计算。
不支持异步操作。当computed中存在异步操作时，该操作无效，并且无法监控数据变化。
默认情况下，计算的属性值被缓存，并且计算的属性基于它们的响应依赖关系被缓存，即基于数据中声明的数据或父组件传递的props中的数据的计算值。
如果一个属性是由其他属性计算出来的，这个属性依赖于其他属性，而且是多对一或者一对一，一般是计算出来的。
如果计算属性的属性值是函数，默认取get方法；函数的返回值是属性的属性值；在computed中，所有属性都有一个get方法和一个set方法。当数据改变时，调用set方法。
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
模板：` 1
/div I是原值： {{{ message }}/p p pI是计算属性的值： { { Computed message } } /p//Computed可以直接在DOM中使用，不需要调用/div `，
计算值：{
//Getter计算消息：计算属性{
//`this `指向vm实例returnthis.message.split()。反转()。联接(“”)
}
}
})
结果：
我是原值：你好
我是计算属性的值：“olleH”
如果未使用计算属性，则使用message.split(“”)。反转()。join()会直接写入模板，所以在模板中放入过多的声明性逻辑会使模板本身过重，尤其是在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性产生很大的影响。
而且如果计算出来的属性的依赖关系不变，就会变成缓存，计算出来的值不会重新计算。
因此，如果要通过复杂的逻辑获取数据，建议使用计算属性。
侦听属性watch
不支持缓存，数据变化会直接触发相应的操作。
手表支持异步；的监控功能接收两个参数，第一个参数是最新值；第二个参数是输入前的值；
当一个属性发生变化时，需要进行相应的操作；一对多；
监控数据必须是props中已在数据中声明或由父组件传递的数据。当数据发生变化时，会触发其他操作。该函数有两个参数：
新Vue({
数据：{
n: 0，
目标
答：“答”
}
},
模板：` 1
div @ click= n=1 n1/button button @ click= obj . a= hi obj . a hi /button button @ click= obj= a: a } obj=new object/button/div `，
观察：{
n() {
Console.log(n已更改)；
},
目标
处理程序：函数(val，oldVal) {
Console.log(“对象已更改”)
},
Deep: true //该属性设置当任何被拦截对象的属性发生变化时，无论嵌套有多深，都应该执行处理程序的回调}，
目标a :
处理程序：函数(val，oldVal) {
Console.log(obj.a已更改)
},
Immediate: true //该属性设置在开始监听后立即调用回调函数}
}
}).$ mount( # app )；
不应该用arrow函数来定义watcher函数，因为arrow函数没有这个，它的this会继承它的父函数，但是它的父函数是window，导致arrow函数的this指向window而不是Vue实例。
控制deep是否希望看到此对象中的属性更改。
立即控制是否在第一次渲染时执行该功能。
虚拟机的使用。$watch()类似于手表回调。
Vm。$watch(数据属性名称，fn，{deep:立即：})
vm。$watch(n ，function(val，newVal){
Console.log(n已更改)；
}，{deep: true，immediate: true})
总结
如果一个数据需要复杂的计算，使用computed。
如果需要监控一段数据并对其进行处理，请使用watch。
这就是Vue中computed和watch区别的细节。更多关于Vue中computed和watch的区别，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。