Vue-侦听器

1.使用：当需要监听某个数据是否发生改变，就需要用到watch

2.watch:{只要监听的属性发生了变化，这个函数就会被执行，这个函数有两个参数，分别是改变后的值，未改变的值}

watch:{

   属性：funchtion( value,oldValue){    

}}

}

3.简单的监听一个属性，不需要深度监听，如果是复杂数据类型就需要完整的监听写法

因为默认情况下，watch只能监听到简单数据类型的数据变化，如果监听的是复杂类型，只会监听地址是否发生变化，不会监听对象内部属性的变化-这样就需要使用监听的完整写法-是一个对象

watch:{

         friend:{
            handler(value){ console.log("你变了，value)} //handler数据发送变化，需要执行的处理程序

            deep:true, //如果是true，代表深度监听，不仅会监听地址的变化，还会监听对象内部属性的变化

            immediate:true //立即，立刻 是否监听，默认是false，如果是true的情况下，代表页面一加载，就会先执行一次处理程序

}

小结；

1、wathc不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
3、immediate：组件加载立即触发回调函数执行
4、deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑
5、watch擅长处理的场景：一个数据影响多个数据，例如搜索框

=========================================================================
computed 和 watch 有什么区别？
computed 计算属性，是依赖其他属性的计算值，并且有缓存，只有当依赖的值变化时才会更新。
watch 是在监听的属性发⽣变化时，在回调中执⾏⼀些逻辑。
所以， computed 适合在模板渲染中，某个值是依赖了其他的响应式对象甚⾄是计算属性计算⽽来，
⽽ watch 适合监听某个值的变化去完成⼀段复杂的业务逻辑。

=========================================================================
Vue 中的 computed 是如何实现的
流程总结如下：
1. 当组件初始化的时候， computed 和 data 会分别建⽴各⾃的响应系统， Observer 遍历 data
中每个属性设置 get/set 数据拦截
2. 初始化computed 会调⽤initComputed 函数
  1). 注册⼀个 watcher 实例，并在内实例化⼀个 Dep 消息订阅器⽤作后续收集依赖（⽐如渲染
   函数的 watcher 或者其他观察该计算属性变化的 watcher ）
   2). 调⽤计算属性时会触发其Object.defineProperty 的get 访问器函数
   3). 调⽤ watcher.depend() ⽅法向⾃身的消息订阅器 dep 的 subs 中添加其他属性的
watcher
    4). 调⽤ watcher 的 evaluate ⽅法（进⽽调⽤ watcher 的 get ⽅法）让⾃身成为其他
watcher 的消息订阅器的订阅者，⾸先将 watcher 赋给 Dep.target ，然后执⾏ getter
求值函数，当访问求值函数⾥⾯的属性（⽐如来⾃ data 、props 或其他 computed ）时，
会同样触发它们的 get 访问器函数从⽽将该计算属性的 watcher 添加到求值函数中属性的
watcher 的消息订阅器 dep 中，当这些操作完成，最后关闭 Dep.target 赋为 null 并
返回求值函数结果。
3. 当某个属性发⽣变化，触发 set 拦截函数，然后调⽤⾃身消息订阅器 dep 的 notify ⽅法，遍
历当前 dep 中保存着所有订阅者 wathcer 的 subs 数组，并逐个调⽤ watcher 的 update ⽅
法，完成响应更新。