记录个人Vue.js从会用到精通之路 6

侦听器 watch

watch能够监听数据的变化来做出相应。

watch的写法是多种多样的

watch对象中key是监听目标，而value值由多种：

• 使用最多的：value是对应的watcher函数

  watch : {
      targetName : function(newValue,oldValue){
          // target的值一旦改变，函数执行。
  
          // 若是target是对象，即便target上的某个属性改变，因为对象的指向
             没变，因此并不会触发watcher函数。
      }
  }
  复制代码

• value是方法名

  watch:{
      targetName : 'someMethod'
  }
  复制代码

• value是对象，使用这种方式，要掌握handler、deep、immediate三个属性。

  watch:{
      targetName : {
          handler : function(newValue,oldValue){  //... },
          deep : true/false,  
          immediate : true/fasle
      }
  }
  复制代码

  handler也就是watcher函数，这个就没必要长篇大论了。

  那这里的deep属性与immediate属性起什么做用呢？

  咱们先说immediate这个属性，默认值是false。当咱们将其设置为true的时候，该回调将会在侦听开始以后被当即调用！

  这是啥意思呢？

  当它为false的时候，watcher函数的执行，取决于target的改变。若是它不改变，那咱的watcher函数就没法执行。可是当它为true的时候，无论三七二十一，在target成功初始化的时候，就先把watcher函数跑一遍。

  const vm = new Vue({
      el : '.demo',
      data : {
          name : '97T'
      },
      watch:{
          name : {
              handler(newVal,oldVal){
                  console.log('handler is runing!')
              },
              immediate : true
              // 默认值为false
          }
      }
  })
  复制代码

  再来看deep这个属性，默认值是false。官方的解释是这样的：

  该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深。

  也就是说即便target的引用值没有改变，可是监听器会一层层的往下遍历，监听每个属性，那这样性能开销就很是大了。咱们可使用字符串形式监听来优化：

  const vm = new Vue({
      el : '.demo',
      data : {
          obj : {
              name : 'dog',
              age : 3
          }
      },
      watch:{
          'obj.name' : function(){
              console.log('obj.name is change');
              // 若是obj.age发生改变，并不会触发这个watcher函数。
          }
      }
  })
  复制代码

watch注销

说实话，此次拜读文档是我第一次听这个词，那一块儿来看看吧。

一般咱们在开发中，会大量的使用组件，而watch每每都在组件中，它会随着组件的销毁而销毁，每每咱们不须要手动销毁。

可是！若是你非要按下面这么写，咱也不能拦着你！

const app = new Vue({
    //...
})
const unWatch = app.$watch('target',function(){
    //...
})
复制代码

那这该如何注销呢？

其实app.$watch调用后的返回值就是对应的注销方法

unWatch()  //手动注销
复制代码

回到咱们昨天的问题：computed VS watch

我的的想法是虽然watch也能够实现computed，可是他俩各有所长，虽然computed常常使用，可是watch有更适合使用它的地方！