Vue新手教程——watch侦听属性

Vue的watch主要用于监听data或computed中的值变化，只要监听的属性有变化，那就会执行指定的代码。

watch接收2个参数，newVal和oldVal，分别代表变化后和变化前的值。

基本用法如下：

① 监听普通的单个值变化

1  watch: {
2      isCollapse(newVal, oldVal) {
3        console.log(`改变前是${oldVal}，改变后是${newVal}`)
4      }
5    }

② 监听路由的变化

1 watch: {
2     $route(to, from, next) {
3       console.log(`路由跳转前是${from}，跳转后是${to}`)
4       next() // 必须执行next函数才能继续完成路由跳转，参数传false阻止路由跳转
5     }
6 }

③ 监听对象里面的key的变化

单个监听：

1 watch: {
2     "Form.id": {
3       handler(newVal, oldVal) {
4         console.log(`改变前是${oldVal}，改变后是${newVal}`)
5       },
6       deep: true,
7     }
8 }

整体监听：

watch: {
    Form: {
      handler(newVal, oldVal) {
        console.log(`改变前是${oldVal}，改变后是${newVal}`)
      },
      deep: true,
    }
}

④ 监听数组的变化类似于监听对象整体