vue中watch的触发条件及用法是什么呢

Admin 2022-09-16 群英技术资讯 338 次浏览

这篇文章主要介绍了“vue中watch的触发条件及用法是什么呢”相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中watch的触发条件及用法是什么呢文章都会有所收获,下面我们一起来看看吧。

vue中的监听方法

watch

注意

名字 你想监听哪个属性,就要和他起一样的名字

1.作用

用来监听vue实例中的数据变化
可以随时修改状态的变化

2.触发条件

当你监听的属性发生变化时,会自动调用对应的监听方法

3.使用场景

用于异步处理,开销比较大的运算

4.示例

	 watch:{
             name(newvalue,oldvalue){
                  //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
                    // this.age
                    // console.log('name属性发生变化了')
                    console.log(newvalue,oldvalue)
                }

5.监听对象时

<script>
export default {
    data() {
        return {
            obj: {
                name: "张三",
                age: 20,
                children: [
                    {
                        name: "李四",
                        age: 27
                    },
                    {
                        name: "王五",
                        age: 23
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</script>

监听对象的时候,需要加deep:true,这样才能深入底层去实时监听,如果没有加的话,对象是监听不到变化的。

immediate属性:布尔值
immediate:true:首次加载就监听数据变化
immediate:false:只有发生改变才监听

deep:true;

是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数


到此,关于“vue中watch的触发条件及用法是什么呢”的学习就结束了,希望能够解决大家的疑惑,另外大家动手实践也很重要,对大家加深理解和学习很有帮助。如果想要学习更多的相关知识,欢迎关注群英网络资讯站,小编每天都会给大家分享实用的文章!

群英智防CDN,智能加速解决方案
标签: vue

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服