vue2.0 -- watch监听

时间 2019-11-16

标签 vue2.0 vue watch 监听繁體版

原文原文链接

watch监听的几种写法:html

<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方法,有时则不会用到vue

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>

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

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

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

若是用了箭头函数,则指向的是父级做用域的上下文.

1. vue.js watch监听，vue.js 监听watch
2. vue watch 监听
3. $scope.$watch监听
4. Vue watch监听
5. Vue——监听器watch
6. watch监听变化
7. watch监听对象
8. 监听属性watch:
9. watch 监听属性
10. vue watch 路由监听属性监听
更多相关文章...
• Redis watch命令——监控事务 - Redis教程
• Redis发布订阅模式 - Redis教程
• RxJava操作符（六）Utility
• Java Agent入门实战（一）-Instrumentation介绍与使用