Vue中computed和watch有哪些区别
计算属性computed：
- 支持缓存，只有依赖数据发生改变，才会重新进行计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
- 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
varvm=newVue({
el:'#app',
data:{
message:'hello'
},
template:`
我是原始值:"{{message}}"
我是计算属性的值:"{{computedMessage}}"
//computed在DOM里直接使用不需要调用`,
computed:{
//计算属性的gettercomputedMessage:function(){
//`this`指向vm实例returnthis.message.split('').reverse().join('')
}
}
})
结果：
我是原始值:"Hello"
我是计算属性的值:"olleH"
如果不使用计算属性，那么message.split('').reverse().join('')就会直接写到template里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话，它就会变成缓存，computed的值就不会重新计算
所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性
侦听属性watch
- 不支持缓存，数据变，直接会触发相应的操作。
- watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
- 当一个属性发生变化时，需要执行对应的操作；一对多；
- 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：
newVue({
data:{
n:0,
obj:{
a:"a"
}
},
template:`
n+1obj.a+'hi'obj=新对象 `,
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()的用法和watch回调类似
- vm.$watch('data属性名',fn,{deep:..,immediate:..})
vm.$watch("n",function(val,newVal){
console.log("n变了");
},{deep:true,immediate:true})
总结
- 如果一个数据需要经过复杂计算就用computed
- 如果一个数据需要被监听并且对数据做一些操作就用watch
以上就是Vue中computed和watch有哪些区别的详细内容，更多关于Vue中computed和watch的区别的资料请关注毛票票其它相关文章！