码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-watch 中的 deep 和 immediate 的理解

时间:2019-08-28 22:31:26      阅读:394      评论:0      收藏:0      [点我收藏+]

标签:sans   script   profile   固定   javascrip   ons   als   监听   function   

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, 代表代码一加载 立马执行监视函数
            }
        }
    })

 

Vue-watch 中的 deep 和 immediate 的理解

标签:sans   script   profile   固定   javascrip   ons   als   监听   function   

原文地址:https://www.cnblogs.com/cloudbarrychen/p/11426782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!