computed是计算属性,watchisalistenercomputed是计算属性,另一个属性是通过其他变量计算的,比如fullname当firstname和lastname变量依赖改变值时重新计算自己。此外,computed有一个缓存。计算属性会根据它们的依赖关系进行缓存,只有当相关依赖关系发生变化时才会重新计算,这意味着如果依赖关系没有变化,多次访问计算属性会立即返回之前的计算结果,而无需执行functioneverytimeWatch是一个监听器,监听一个特定的值,当值发生变化时执行特定的函数。data(){return{firstname:'Kongjo',lastname:'Jotaro',fullname2:'Kotaro'}},watch:{lastname:function(val){this.fullname2=this.firstname+''+val}}}//this.lasttname='XuLun'//console.log(this.fullname2)//空条XuLuncomputed:{fullname:function(val){returnthis.firstname+''+this.lastname}}//九条承太郎监听复杂数据类型监听复杂数据类型需要用到深度监控data(){return{jojo:{stand:'stand'}}},watch:{jojo:{handler(oldval,newval){console.log(oldval,newval)},deep:true}},methods:{changeWatch(){this.jojo.stand='Popoli!'}}发现oldval和newval的值是一样的,所以深度监控可以监控到对象的变化,但是无法监控到具体对象中属性的变化。同样的原因是因为索引相同的对象/数组,vue不会保留原始值的副本。深度监控对应的函数名必须是handler,否则没有作用,因为watcher对应handler的调用总结:1,即computed关联多个变量,只要其中一个变量值即可改变,该函数将被触发;watch只依赖于一个变量,一次只能监控一个变量。2.最重要的一点是:watch监控的是data中定义的值,而computed属性只能在computed中定义,不能在data中定义,否则会报错(重复定义),因为computed定义变量为computedattributes并没有返回相应的结果给这个变量,这个变量不能被重复定义和赋值。3.①:如果在computed中使用了箭头函数,this不会指向vueComponent(因为箭头函数没有自己的this,而是和上层scope共享this,computed的上层scope可能就没有了。所以this是undefined)②:用function()解决,this指向vueComponent③:用object,get(),set()也指向vueComponent(例子:fullname:{get(){returnthis.firstname+''+this.lastname}})4.另外,在执行高开销的异步操作时,建议使用watch或method而不是computed。另请参阅上面的门户网站
