前言在vue项目中，我们经常需要处理数据的变化。这时候我们就需要用到watch和computed这两个属性。既然都是值变化触发变化属性，那么它们之间有什么异同呢？computedComputed是一个计算属性，它根据您所依赖的数据动态显示新的计算结果。计算属性将被添加到Vue实例。所有getter和setter的this上下文自动绑定到Vue实例。计算出来的属性不需要调用，可以直接在DOM中使用。例子varvm=newVue({el:'#app',data:{message:'red'},template:`
我是原值："{{message}}"
我是computed属性的值:"{{computedMessage}}"
//computed不需要在DOM中直接调用
`,computed:{//getterof计算属性computedMessage:function(){//`this`指向vm实例returnthis.message.split('').reverse().join('')}}})结果：I为原始值:"red"I是计算属性的值:"der"如果不使用计算属性，那么message.split('').reverse().join('')会直接写入template，所以在模板中放入过多的声明性逻辑会使模板本身过于沉重，尤其是当页面中使用大量复杂的逻辑表达式来处理数据时，会对页面的可维护性产生很大的影响，如果计算属性依赖于它不变，它将成为一个缓存，并且computed的值不会被重新计算。因此，如果数据需要通过复杂的逻辑得到结果，那么推荐使用computed属性来watch一个对象，key是data对应的data，value是对应的回调函数。该值也可以是方法名称或包含选项的对象。当数据的数据发生变化时，会发生回调。它有两个参数，一个val（修改后的数据data），一个oldVal（原始数据data）Vue实例在实例化的时候会调用$watch()，遍历watch对象的各个属性newVue({data:{n:0,对象:{a:"a"}},模板:`
n+1obj.a+'hi'obj=newobject
`,watch:{n(){console.log("nchanged");},obj:{handler:function(val,oldVal){console.log("objchanged")},deep:true//这个属性设置为执行当任何监听对象的属性发生变化时处理程序的回调，无论嵌套多深},"obj.a":{handler:function(val,oldVal){console.log("obj.achanged")},immediate:true//此属性设置回调将在侦听开始后立即调用}}}).$mount("#app");注意：箭头函数不应该用来定义watcher函数，因为箭头函数没有this，它的this会继承它的parentfunction，但是它的parentfunction是window，导致箭头函数的this指向windowVue实例的deep控制是否监听这个对象的属性变化立即控制是否在第一次渲染时执行这个函数vm.$watch('data'属性名称',fn,{deep:..,immediate:..})vm.$watch("n",function(val,newVal){console.log("nchanged");},{deep:true,immediate:true})两者的区别是一样的：都是观察页面数据变化的区别：computed只会在依赖的数据发生变化时才会计算，数据会被缓存。watch每次都需要执行这个函数。watch更适合数据变化时的异步操作
