Vue-watch 中的 deep 和 immediate 的理解

Posted 2022-09-05 cloudbarrychen

watch 对象

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

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

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

 

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

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

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

immediate：其值是 true 或false；immediate : true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的 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, 代表代码一加载 立马执行监视函数
            
        
    )