vue2.0 -- watch监听

最新推荐文章于 2024-07-12 18:36:18 发布

weixin_30510153

最新推荐文章于 2024-07-12 18:36:18 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whh-16/p/9945056.html

版权

watch监听的几种写法:

<html>
<!--在这里插入内容-->

    watch: {
        // 适用于普通变量
        a: function (val) {
            console.log(000)
        },
        // 方法名
        b: 'doing'
        //用handler方法
        c: {
            //立即执行,在c声明之后就开始执行handler里面的内容
            immediate: true,
            //深度监听 监听C的属性 c.xxx
            deep: true,
            handler: function (val) 
            {0000000000000}
        }
    }
</html>

1.handler方法

在项目中,有时会用到handler方法,有时则不会用到

handler方法有什么作用呢:

handler方法是 watch中的一个属性,是函数类型是规定的写法

2.immediate方法

watch监听,是当对象发生变化时,才回去监听其变化.而immediate是在对象声明了之后,就开始去监听,watch里面的handler方法就开始执行.

3.deep方法

Vue 不能监听到对象属性的添加和删除, deep 就排上了用场,监听器会一层一层的往下遍历,给对象的所有属性都加上这个监听器,从而监听到对象属性的变化.

<html>
<!--在这里插入内容-->

    data: {
        obj: {
            a:12
        }
    }
    
    watch: {
        'obj' : {
            handler(val) {
                console.log(val.a)
            },
            deep: true
        }
    }
</html>

但是,也有别的方法---->就是直接监听obj的a属性

<html>
<!--在这里插入内容-->

    data: {
        obj: {
            a:12
        }
    }
    
    watch: {
        'obj.a' : {
            handler(val) {
                console.log(val.a)
            }
        }
    }
</html>

今天编程,所吃的亏 -.-

watch 里面不能使用 箭头函数.

watch里面的this指向的应该是vue的实例对象.

如果用了箭头函数,则指向的是父级作用域的上下文.

转载于:https://www.cnblogs.com/whh-16/p/9945056.html

weixin_30510153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0 -- watch监听

watch监听的几种写法:<html> watch: { // 适用于普通变量 a: function (val) { console.log(000) }, // 方法名 b: 'doing' //用handle...
复制链接

扫一扫