vue-watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

new Vue({
        data: {
            firstName: 'Jokcy',
            lastName: 'Lou',
            fullName: ' '
        },
        watch: {
            firstName(newName, oldName) {
                this.fullName = newName + ' ' + this.lastName
            }
        }
    })

注意：

在初始化的时候fullName是没有值的，只有当数据改变时，才会显示。因为 watch 的方法默认是不会执行的，只有当监听数据变化，才会执行。
不能使用箭头函数来定义watcher 函数。例如：

watch: {
     firstName : (newName, oldName) => this.fullName = newName + ' ' + this.lastName
}

理由是：箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，所以this. fullName 和 this.lastName 将是undefined

watch中的两个重要选项

1. immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
例如：

watch: {
    $route: {
        handler: function (val, oldVal) {
          // 执行逻辑代码
        },
        immediate: true
      }

    },

应用场景： watch监听不到路由变化
解决方案： 在路由监听时加 immediate: true
理由： watch 在添加了immediate: true 后，会优先created钩子函数执行

2. deep

在选项参数中指定deep: true 将深度监听对象内部值的变化
注意： 注意监听数组的变动不需要这么做。
例如：

new Vue({
        data: {
            obj: {
                a: '123'
            }
        },
        watch: {
            obj: {
                handler() {
                    console.log('obj.a changed')
                },
                deep: true
            }
        }
    })

不使用 deep 时，当我们改变 obj.a 的值时，watch不能监听到数据变化，默认情况下，handler 只监听属性引用的变化，也就是只监听了一层，但改对象内部的属性是监听不到的。
应用场景： watch 监听不到对象内部的属性值变化
解决方案：在对象监听时加 deep: true
理由：通过使用 deep: true 进行深入观察，这时，在监听 obj，会把 obj 下面的属性层层遍历，都加上监听事件。
该方案的缺点： 这样做，性能开销也会变大，只要修改 obj 中任意属性值，都会触发 handler。
优化： 在字符串中，写 obj 深入的属性调用，vue 会层层解析，找到 a，并进行监听.

new Vue({
        data: {
            obj: {
                a: '123'
            }
        },
        watch: {
            'obj.a': {
                handler() {
                    console.log('obj.a changed')
                }
            }
        }
    })

That's all !

最后编辑于：2019.06.21 15:58:04