Vue computed watch methods

Watch 侦察属性

• 用于监听数据是否改变
  • 适合做历史记录的追踪和撤销
• watch是异步的， 异步的意思是在当前所有代码执行完了才会执行watch内的代码
• watch初始化页面时不会自动执行，而是在数据被修改后执行
  • 但高级功能是immediate:true让属性支持初始化页面时自动执行一次 在线示例
• watch另一个高级功能是 deep 属性，允许你以主观意愿告诉Vue数据是否变了
  • 复杂对象的引用地址变了才算是变，而简单类型数据只需要数据变了就算变
  • obj={a:1}, obj.a 变了理论上并不会触发obj的变化，而 deep 属性则可以监测这一点！
  • 即哪怕 obj.a 发生变化，obj 整体就算变化 在线示例

this.$nextTick解决watch异步问题

先查看一个例子 这个例子展示了watch异步问题的解决

• Vue解决异步问题时用的就是自己封装的nextTick，因为源码中就是用nextTick，只有和它用同一个级别的异步函数才能将任务安排于发生watch之后，并不是setTimeout都可以解决的
• 这个例子其实用debugger方式就可以观察到

watch中属性监听的几种写法

watch:{
	o1:function(newValue,oldValue){},
    o2(){},
    o3:[f1,f2],
    o4:'methodName',
    o5:{handler:fn,deep:true,immediate:true},
    'object.a':function(){}
}

methods 可以使用时传参也可以定义是传参

Computed 计算属性

在线示例1
在线示例2

• 就当作正常的属性去使用即可，computed 初次就会运行
• 常用 getter，但它也有 setter

computed 与 methods 之间的区别:

• 只要挂到页面上的任意 data 有任何变动，页面就会刷新，method 会因此重新执行
• 计算属性挂载在页面上之后，哪怕页面刷新，计算属性的缓存机制保证不会重复运行
• 但如果你用的是{{ xxx() }}这样的方法，那么每次页面的刷新必会重新执行一遍

拓展成 setter

computed:{
	xxx(){   // 这就是默认getter
		return 
	}
}

computed:{
	xxx:{   // 拓展写法
		get(){}
		set(){}
	}
}

Computed 可以用于 :class 或者 :style

返回一个对象即可 在线示例