0
点赞
收藏
分享

微信扫一扫

vue监听和深度监听watch

sullay 2022-02-10 阅读 92

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

现在定义监控时,person是一个对象,并且要指定两个属性:

deep:代表深度监控,不仅监控person变化,也监控person中属性变化。
handler:就是以前的监控处理函数。
通过v.name和v.age获取对象中具体的值。

举报

相关推荐

0 条评论