09-watch监听

watch 监听（24-watch-监听.html）

1. 监听 data 数据的改变(最基本的使用)

  watch: {
    firstName: function (newVal, oldVal) {
      //...
    }
  },

watch 的特性：最初绑定的时候是不会执行的，要等到 监听的数据 改变时才执行监听计算。

2. 如何 在绑定的时候就执行对应的方法？？？

  watch: {
    firstName: function (newVal, oldVal) {
      //...
    },
    lastName: { // 这种写法 等于 上面的写法，handler(){} 就等于上面的 function(){}
      handler(newVal, oldVal) {
        console.log(newVal, newVal === oldVal)
      },
      immediate: true, // 代表在wacth里声明了lastName这个方法之后立即先去执行handler方法
    }
  },

3. 监听 URL 路由的改变

• watch 监听的 键，可以用字符串来表示，并且可以用.来链接。但是不能用[]比如list[0].id

  watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/shop/detail"){
        console.log("商品详情");
      }
    }
  },

3. 监听 深层数据 的改变

  watch: {
    list: {
      handler(newVal, oldVal) {
        console.log(newVal, newVal === oldVal)
      },
      deep: true,
    }
  },

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
优化:我们可以是使用字符串形式监听。

  watch: {
    '$route.path': function () {
      // ...
    },
    'list.id': {
      handler(newVal, oldVal) {
        console.log(newVal, newVal === oldVal)
      },
      // deep: true,
    }
  },