Watch的深度监听

最新推荐文章于 2025-06-26 11:36:46 发布

原创最新推荐文章于 2025-06-26 11:36:46 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了Vue.js中watch属性的使用，特别是深度监听(deep)选项，用于监控对象属性的变化。示例展示了如何监听person对象的name和age属性，并在值改变时通过handler函数打印新的值。通过v-model和v-bind实现数据双向绑定，实现实时更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Watch的深度监听

watch可以让我们监控一个值得变化，并且还可以做出相应的反应
watch属性他可以监听data属性中name值得变化，定义监控的时候， name这个值对应的应该是一个监控处理函数的name
将name属性和对画框绑定并在对应的页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框输入的值变化而变化
监控处理函数name有两个参数


    <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',
        data:{
            person:{
                name:'',
                age:18
            }
        },
        watch:{  //监控name属性
           person:{
               deep:true, //开启深度监听
               handler(v){
                   console.log(v.namge,v.age)
               }
           }
        }
    })
    </script>