Vue的侦听属性

最新推荐文章于 2024-08-22 13:41:17 发布

张可盐

最新推荐文章于 2024-08-22 13:41:17 发布

阅读量240

点赞数

分类专栏： Vue 文章标签： vue.js vue javascript js es6

本文链接：https://blog.csdn.net/qq_44091773/article/details/112680408

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中计算属性与监听器（watch）的使用，包括基本用法、立即执行和深度监听。通过示例代码展示了如何通过watch实现数据变化时的响应，以及如何在数据初始化时立即触发回调，同时讲解了如何深度监听对象属性的变化，确保在对象内部属性更新时也能得到通知。

摘要由CSDN通过智能技术生成

前言

Vue的计算属性

前面提到了计算属性，虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

基本用法

在vue中，使用watch来响应数据的变化，即在data中的数据发生变化的时候，会触发监听函数：

body>
<div id="app">
    <input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(newVal,oldVal){
                console.log("江山如此多娇，引无数英雄竞折腰。")
                console.log(newVal,oldVal)
            }
        }
    })
</script>
</body>

在这里定义了一个input 文本框，并用v-model进行绑定，当数据发生变化的时候，在控制台可以看到变化。值得注意的是，回调函数有两个参数，一个是新改变的值，另一个是上一个值。值得注意的是，监听函数的函数名必须是在data中定义且要监听的属性，如上面的message。当然除了监听data中的数据还可以监听路由，路由在后面会介绍到，主要是监听'$route.path'，这是方法和监听属性所不能的。

立即执行

通过基本用法可以看到watch通过响应数据进行触发，那么我想要在页面刷新后立即触发，不通过改变数据触发怎么办呐？这里就要使用到immediate和handler，具体实例如下：

<body>
<div id="app">
    <input type="text" v-model="context" placeholder="context"> <br>
    <input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            context:"",
            message:""
        },
        watch:{
            message(newVal,oldVal){
                console.log("江山如此多娇，引无数英雄竞折腰。")
            },
            context:{
                handler(newVal,oldVal){
                    console.log("须晴日，看红装素裹，分外妖娆。")
                },
                immediate: true
            }
            
        }
    })
</script>
</body>

如上面的context对象，这里设置immediate=true，然后用handler实现方法体的逻辑，之前我们写的函数其实就是在写这个handler方法；immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

深度监听

当需要监听复杂数据类型(对象)的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听：

<body>
<div id="app">
    <input type="text" v-model="context" placeholder="context"> <br>
    <input type="text" v-model="message" placeholder="message"> <br>
    <input type="number" v-model="man.age" placeholder="man.age">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            context:"",
            message:"",
            man:{
                name:"吴邪",
                age:"25"
            }
        },
        watch:{
            message(newVal,oldVal){
                console.log("江山如此多娇，引无数英雄竞折腰。")
            },
            context:{
                handler(newVal,oldVal){
                    console.log("须晴日，看红装素裹，分外妖娆。")
                },
                immediate: true,
                deep: true,
            },
            man:{
                handler(newVal,oldVal){
                    console.log("我是吴三省")
                },
                immediate: true,
                deep:true
            }

        }
    })
</script>
</body>

设置deep: true 则可以监听到man.age的变化，此时会给man的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，可以使用字符串的形式监听对象属性，如监听man.name这个属性

watch:{
    'man.name':{
        handler(newVal,oldVal){
            console.log("小邪，我是吴三省")
        },
        immediate: true,
        deep:true
    }
}