Vue之监听方法案例详解

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之监听方法案例详解的文章就介绍到这了,更多相关Vue之监听方法内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• Vue3中watchEffect的用途浅析
• Vue3中watch的用法与最佳实践指南
• vue Watch和Computed的使用总结
• 如何理解Vue中computed和watch的区别
• vue项目watch内的函数重复触发问题的解决
• vue监听路由变化时watch方法会执行多次的原因及解决
• vue3 watch和watchEffect的使用以及有哪些区别
• vue watch监控对象的简单方法示例

本文由 华域联盟 原创撰写：华域联盟 » Vue之监听方法案例详解

转载请保留出处和原文链接：https://www.cnhackhy.com/77091.htm