计算属性computed：支持缓存，只有当依赖的数据发生变化时，才会重新计算不支持异步，当computed中有异步操作时，无效，无法监听datachanges计算属性的值会发生变化默认使用缓存，计算属性根据其响应式依赖进行缓存，即根据数据或数据中声明的数据计算值父组件传递的props。如果一个属性是从其他属性计算出来的，这个属性依赖于其他属性，就是多对一或者一对一。通常使用计算。如果计算属性的值是一个函数，那么默认会使用get方法；函数的返回值是属性的属性值；在computed中，属性都有get和set方法，当数据发生变化时，调用set方法。varvm=newVue({el:'#app',data:{message:'hello'},template:`
我是原值："{{message}}"
Iamthevalueofthecomputedproperty:"{{computedMessage}}"
//computed直接在DOM中使用，无需调用
`,computed:{//computed属性的gettercomputedMessage:function(){//`this`指向vm实例returnthis.message.split('').reverse().join('')}}})result:iistheoriginalvalue:"Hello"i是计算属性的值："olleH"如果你不使用计算属性，那么message.split('').reverse().join('')将直接写入模板，所以把模板中过多的声明逻辑会使模板本身过于繁重，尤其是当页面中大量使用复杂的逻辑表达式处理数据时，对页面的可维护性影响很大，如果calculation属性依赖相同，它会成为一个缓存，computed的值不会被重新计算。因此，如果需要通过复杂的逻辑获取数据，建议使用计算属性监听属性watch。手表不支持缓存，当数据发生变化时会直接触发相应的操作。watch支持异步；监控函数接收两个参数，第一个参数是最新值；第二个参数是输入前的值；当一个属性发生变化时，需要进行相应的操作；一对多；monitordata必须是data中声明的数据或者是父组件传递过来的props中的数据。当数据发生变化时，会触发其他操作。该函数有两个参数：newVue({data:{n:0,obj:{a:"a"}},template:`
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.ahaschanged")},immediate:true//该属性设置监听开始后立即调用回调}}}).$mount("#app");箭头函数不应该用来定义watcher函数，因为箭头函数没有this，它的this会继承它的父函数，但是它的父函数是window，导致箭头函数的this指向window而不是Vue实例deep控制是否看到这个对象的属性变化immediate控制是否第一次渲染执行这个函数vm.$watch()的用法类似于watch回调vm.$watch('数据属性名称',fn,{deep:..,immediate:..})vm.$watch("n",function(val,newVal){console.log("nchanged");},{deep:true,immediate:true})总结一下，如果一个数据需要进行复杂的计算，就用computed;如果需要监控数据并对数据进行一些操作，使用watch
