watch深度监听

最新推荐文章于 2024-03-30 14:43:12 发布

原创最新推荐文章于 2024-03-30 14:43:12 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了如何使用Vue.js的watch特性监控数据变化，并演示了如何在用户输入、对象属性修改时触发相应操作。涵盖了浅层监听和深度监听的区别，以及在实际项目中的应用场景。

watch可以让我们监控一个值的变化，从而做出相应的反应。

    <div id="app">
    用户名：<input type="text" v-model='name'>
    <p>你的名字是：{{name}}</p >
</div>

<!-- 引入vue -->
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

const app=new Vue({
    el:'#app',
    data:{
        name:''
    },
    watch:{  //监控name属性
        name(v1,v2){
            //v1:当前数入的值
            //v2:上一次输入的值
            console.log(v1,v2)
        }
    }
})
</script>

通过watch属性可以监控data属性中name值的变化，定义监控时，name这个值对应的是一个监控处理函数name()。

将name属性和对话框绑定，并在对应页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框中输入值的变化而变化。

其中监控处理函数name有两个参数：

v1表示当前监控的值。
v2表示上一次监控的值。
如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化：

<div id="app">
    用户名：<input type="text" v-model='person.name'>
     <button @click='person.age++'>+</button>
    <p>你的名字是：{{person.name}}</p >
    <p>你的年龄是：{{person.age}}</p >
</div>

<!-- 引入vue -->
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

const app=new Vue({
    el:'#app',