Vue中的侦听器 --watch

一、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

二、监视的两种写法

1.new vue时传入watch配置

2.通过vm.$watch监视

        
今天天气很{{info}}
        点我切换天气
 
    

三、深度监视

1.深度监视：

vue中的watch默认不检测对象内部值得改变（一层）

配置deep:true可以检测对象内部值改变（多层）

2.备注：

vue自身可以检测对象内部值得改变 但vue提供的watch默认不可以

使用watch时根据数据的具体结构 决定是否采用深度监视

        
今天天气很{{info}}
        点我切换天气
        

        
a的值是：{{number.a}}
        点我让a+1
        

        
b的值是：{{number.b}}
        点我让b+1
    
    

四、computed 和 watch 之间的区别

computed 和 watch 之间的区别：

1.computed能完成的功能，watch也能完成

2.watch能完成的功能，computed不一定能完成 例如 watch可以进行异步操作

原则：

1.所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

2.所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等）最好写成箭头函数

这样this的指向才是vm或组件实例函数