彻底弄懂 Vue 监听对象 watch 中 deep 和 immediate 的用法

watch 对象

监听模型变量的变化。是一个对象，以键值对形式出现。

值可以是函数：就是当你监控的模型变量变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是变化前的值。

值也可以是函数名：不过这个函数名要用单引号 '' 来包裹。

 

值是包括选项的对象：选项包括有三个。

handler：其值是一个回调函数。即监听到变化时应该执行的函数。

deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代 JavaScript 的限制 (以及废弃 Object.observe )，Vue 不能检测到对象属性的添加或删除）。

immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。

 

请看如下示例代码：

 

var vm = new Vue({
        el: '#box',
        data: {
            lists: [
                {
                    id: 1,
                    title: 'lorem',
                    profile: {id: 1, username: 'lorem'}
                },
                {
                    id: 2,
                    title: 'andy',
                    profile: {id: 2, username: 'andy'}
                }
            ]
        },
        watch: {
            //  改成了一个对象，属性值 handler 固定写法
            lists: {
                handler: function (newVal, oldVal) {
                    console.log('lists change....')
                },
                deep: true,
                // 代表开启深度监控。意思是数据的任何一个属性发生变化，监视函数需要执行
                immediate: true,
                // 如果immediate 设置为true, 代表代码一加载 立马执行监视函数
            }
        }
    })