Vue中数据监听的方法

computed是计算属性,可以根据data 中的数据成员,动态计算出一个新的数据成员(这个数据成员在data 中并不存在),计算属性的函数必.须有返回值; watch是监视器,可以监视data中某一一个数据成员的改变或路由中的某些属性的改变,可以根据这个改变,做一些其他操作(不仅仅局限于更新其他相关数据).

1、watch监听的简单使用

this.$watch("要监听的属性名", (newValue, oldValue) => {

//执行代码

},{

deep: true// 深度监听（例如对象中的数据）

immediate: true//立即执行监听

})

实例：

由于上面的代码可以看到： 

1点击监听a按钮是，可以在打印台看到两个值分别是：

 分别为a改变前后的值；

2监听一个对象中的一个值结果同上，注意：immediate: true为页面进入立即监听该数据

3深度监听，默认情况下 watch方法只监听data中的对象，而不能监听到对象内部数据的变化这时候就需要使用deep: true,对监听的对象进行深入监听；

2、computed简单使用：

 由例子可知：当触发两个事件时会修改stus数据的数据，而computed可以根据data中的数据变化而实时计算出来进行显示；