计算并观看

1。computedcomputed是计算的意思，就是在vue实例中创建一个computed属性，属性值是一个对象，对象中包含各种计算的数据变量，和data属性中的变量一样，就是说这个属性用于存储各种计算属性，如果计算属性所依赖的属性没有发生变化，则不会重新触发计算。下面这个小例子来自vue官网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//=>2vm.aPlus=3vm.a//=>2vm.aDouble//=>4是属性调用，不是函数调用2.watchwatch是监听的意思，监听data属性中的各种数据，当监听到的数据发生变化时，自动调用相应的监听函数，所以被监控的属性就是数据中的数据，属性值就是相关的操作。像这样：newVue({data:{n:1,obj:{a:"a"},e:2},watch:{n:function(newVal,oldVal){console.log(`achanged,changed从${oldVal}到${newVal}`)},obj(){console.log("objchanged");},"obj.a":function(){console.log("obj.ahaschanged");},//属性名有特殊符号，所以必须用引号括起来e:['handle1',functionhandle2(val,oldVal){/dosomething}]//数组放在order多个函数操作}})immediate:truewatch中的函数只有在数据发生变化时才会自动调用，所以watch中的监听回调不会在数据初始化第一次出现在页面时执行，所以如果你想要在数据初始化时立即调用，需要自己设置如下：newVue({data:{c:4},watch:{handler:'someMethod',//处理函数可以是方法名immediateinmethods:true//将此属性设置为true意味着立即调用它}})deep:true当一个对象的内部属性发生变化时，默认情况下不会认为该属性发生了变化，因为===运算符是用来判断对象是否发生变化的，但是对象的内部数据发生了变化但地址没有变。因此，当比较只改变对象的内部数据时，比较的是对象前后的地址。结果obj没有变化，只会调用内部属性的监听函数，而不是调用所在对象的监听函数，如下：newVue({data:{obj:{a:"a"}},watch:{obj(){console.log("objchanged");},"obj.a":function(){console.log("obj.a已经改变");},//属性名有特殊符号。所以必须用引号括起来},template:`

`})所以如果你想当对象中的数据发生变化时认为对象发生变化来触发对象的监听函数，你可以在对象的监控事件上加一句deep:true，意思是看得更深，用于复杂类型的深度监控。使用以下方法：watch:{obj:{handler:function(){console.log("objhaschanged");},deep:true//默认为false}}3.两者的区别1.计算什么？存储根据数据通过各种计算计算出来的属性，有依赖，有缓存。当它依赖的数据发生变化时，computed会重新计算。watch是一个监控属性，监控data中的各种数据。当数据发生变化时2.调用计算过程会产生新的数据属性并对其进行监控和计算。watch只是监控当前数据，不会产生新的数据属性。