基本用法

基本类型监听

data () {
  return {
    name: '小黑',
    age: 300,
    isSpirit: true
  }
},
watch: {
  name: function (newVal, oldVal) {
    console.log('name发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  },
  age (newVal, oldVal) {
    console.log('age发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  },
  isSpirit: function (newVal, oldVal) {
    console.log('isSpirit发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  }
},
methods: {
  changeData () {
    this.name = '小白'
    this.age = 10
    this.isSpirit = false
  }
}

以上代码中，对于 age 的监听，是 es6 的写法。

注意：不应该使用箭头函数来定义 watcher 函数?。官网解释如下：

数组和对象的监听

数组：

data () {
  return {
    list: [
      { id: '1', name: 'A' },
      { id: '2', name: 'B' },
      { id: '3', name: 'C' }
    ]
  }
},
watch: {
  list: function (newVal, oldVal) {
    console.log('list发生了变化.')
  }
},
methods: {
  changeData1 () {
    this.list.push({ id: '4', name: 'D' })
  },
  changeData2 () {
    this.list[0].name = 'Z'
  }
}

以上代码，当 changeData1 触发时，可以触发 list 的监听回调函数，而 changeData2 触发时，不会触发 list 的监听回调函数。

changeData1 和 changeData2 的区别：

changeData1 改变了数组的长度。
changeData2 数组长度不变，数组中元素内容改变。

如果想要数组元素改变也触发监听回调函数，只有函数显然不支持。这时需要使用对象，添加 deep 配置。

watch: {
    list: {
      handler (newVal, oldVal) {
        console.log('list发生了变化.')
      },
      deep: true
    },
}

对象：

对象和数组类似。

data () {
  return {
    object: {
      id: '001',
      name: '对象',
      info: {
        type: 'sub',
        name: '嵌入对象'
      }
    }
  }
},
watch: {
  object: function (newVal, oldVal) {
    console.log('object发生了变化.')
  }
},
methods: {
  changeData3 () {
    this.$set(this.object, 'type', 'out')
  },
  changeData4 () {
    this.$set(this.object, 'name', 'haha')
  }
}

changeData3 可以触发object 监听回调函数，changeData4 不可以触发。如果 changeData4 也想触发，也需要使用对象形式：

watch: {
    object: {
      handler (newVal, oldVal) {
        console.log('object发生了变化.')
      },
      deep: true
    }
}

对于上边的 object ，如果只想监听 object 中的 name ，对于其他数据并不关心。可以采用如下写法：

watch: {
  "object.name": function (newVal, oldVal) {
    console.log('object中name发生了变化.')
  }
}

路由的监听

watch: {
  $route: {
    handler (to, from) {
      console.log(to)
      console.log(from)
    }
  }
}

对于路由的监听，需要注意的是，并不是所有组件中的路由监听都会触发。

情景一：

path：'/index/a'，对应组件a，path：'/index/b'，对应组件b。在 a 组件和 b 组件中对于路由的监听，不会触发。

原因：个人认为是，路由切换，组件渲染，在组件渲染的时候，路由的变化已经完成了，故监听不到路由的变化。

情景二：

path：'/index/a' 对应组件A，path：'/index/b'，对应组件B。A组件中有router-view，A组件对应的路由中有嵌套路由 path：'/index/a/c' 和 path：'/index/a/d'。在组件A中可以监听到 c -> d，d -> c 的路由变化，但是对于 a ，b 之间的路由变化则监听不到。

情景三：

有一个公共组件 ls-header ，无论页面如何变化，该组件，一直显示在页面顶部。ls-eader 中可以监听到所有路由的变化。

值的四种形式

watch 方法对应一个对象，键是观察表达式，值是对应回调。

{ [key: string]: string | Function | Object | Array }

值的类型可以是：字符串，函数，对象和数组。

watch: {
    a: 'someMethod', // someMethod对应方法名
    b: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ]
  }

参数配置

当 watch 的值为对象时，支持一些参数配置。

deep: true // 深度监听
immediate: true // 回调将会在侦听开始之后被立即调用
sync: true // 提升优先级

当 watch 中多个回调被触发时，执行的顺序为书写的顺序。

watch: {
  name: function (newVal, oldVal) {
    console.log('name发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  },
  age (newVal, oldVal) {
    console.log('age发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  },
  isSpirit: function (newVal, oldVal) {
    console.log('isSpirit发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
  }
},
methods: {
  changeData () {
    this.age = 10
    this.isSpirit = false
    this.name = '小白'
  }
}

以上代码，当 age，name，isSpirit 都有变化时，watch 的执行顺序：

如果想要 isSpirit 的回调先执行，可以设置 sync: true

watch: {
  isSpirit: {
    handler (newVal, oldVal) {
      console.log('isSpirit发生了变化：newVal:' + newVal + ',oldVal:' + oldVal)
    },
    sync: true
  }
}

修改之后，watch 执行顺序：