vue中watch和computed的区别与使用方法
computed计算属性说明:
computed是基于响应性依赖来进行缓存的。只有依赖数据发生改变，才会重新进行计算（当触发重新渲染，若依赖数据没有改变，则computed不会重新计算）。若没改变，计算属性会立即返回之前缓存的计算结果。
不支持异步，当computed内有异步操作时无效，无法监听数据的变化的值。
computed中的成员可以只定义一个函数作为只读属性,也可以定义成get/set变成可读写属性
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed。
下面的计算属性将不再更新，因为Date.now()不是响应式依赖：
computed:{
now:function(){
returnDate.now()
}
}
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的getter！如果你不希望有缓存，请用方法来替代。
watch监听属性说明：
不支持缓存，数据变或者触发重新渲染时，直接会触发相应的操作。
watch支持异步
当一个属性发生变化时，需要执行对应的操作；一对多时，一般用watch。
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，immediate：组件加载立即触发回调函数执行，deep:深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
watch和computed的区别是：
相同点：
两者都是观察页面数据变化的。
不同点：
- computed只有当依赖的数据变化时才会计算,会缓存数据。
- watch每次都需要执行函数。watch更适用于数据变化时的异步操作。
使用参考官方文档
computed使用
类型：{[key:string]:Function|{get:Function,set:Function}}
详细：
计算属性将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例。
注意如果你为一个计算属性使用了箭头函数，则this不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
computed:{
aDouble:vm=>vm.a*2
}
计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算。注意，如果某个依赖(比如非响应式property)在该实例范畴之外，则计算属性是不会被更新的。
示例：
varvm=newVue({
data:{a:1},
computed:{
//仅读取
aDouble:function(){
returnthis.a*2
},
//读取和设置
aPlus:{
get:function(){
returnthis.a+1
},
set:function(v){
this.a=v-1
},
},
},
})
vm.aPlus//=>2
vm.aPlus=3
vm.a//=>2
vm.aDouble//=>4
watch使用与解释
类型：{[key:string]:string|Function|Object|Array}
详细：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个property。
示例：
varvm=newVue({
data:{
a:1,
b:2,
c:3,
d:4,
e:{
f:{
g:5,
},
},
},
watch:{
a:function(val,oldVal){
console.log('new:%s,old:%s',val,oldVal)
},
//方法名
b:'someMethod',
//该回调会在任何被侦听的对象的property改变时被调用，不论其被嵌套多深
c:{
handler:function(val,oldVal){
;/_..._/
},//orhandler:'方法名'
deep:true,
},
//该回调将会在侦听开始之后被立即调用
d:{
handler:'someMethod',//orhandler:function(val,oldVal){}
immediate:true,
},
//你可以传入回调数组，它们会被逐一调用
e:[
'handle1',
functionhandle2(val,oldVal){
/*...*/
},
{
handler:functionhandle3(val,oldVal){
/*...*/
},
/*...*/
},
],
//watchvm.e.f'svalue:{g:5}
'e.f':function(val,oldVal){
;/_..._/
},
},
})
vm.a=2//=>new:2,old:1
说明：对应上方的a~e
a:监听一个属性,需要使用前后变化值时使用
b:监听一个属性，不会使用到改变前后的值，只为了执行一些方法，可以使用字符串代替字符串代表方法名
c:在监听一个对象时，当对象内部的属性被改变时，无法触发watch,设置deep为true后，无论嵌套多深，只要属性值被改变都会触发监听。但这种方式开销会较大，监听器会一层一层往下找，为每个属性添加监听器。
如果我们只是监听对象的某个属性改变时，可以这样做：
watch:{
'user.name':{
handler:'method'
}
}
d:watch是在监听属性改变时才会触发，组件创建时可能不会执行，因此我们可以设置immediate:true,就会让在组件创建后watch能够立即执行一次。就不用在create的时候去修改属性啦。
handelr：触发监听执行的方法（需要用到改变前后的值时，可换成函数）
immediate：监听开始之后被立即调用
e:监听一个属性，执行多个函数包括回调等
注意，不应该使用箭头函数来定义watcher函数(例如searchQuery:newValue=>this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.updateAutocomplete将是undefined。
总结
到此这篇关于vue中watch和computed的区别与使用方法的文章就介绍到这了,更多相关vuewatch和computed的区别内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。