vue监听和深度监听watch

向右看齐 2022-12-11 06:29 140阅读 0赞

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

<div id="app">
            用户名：<input type="text" v-model='name'>
            <p>你的名字是：{ { name}}</p>
        </div>
    
        
        <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>
    
        
        <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获取对象中具体的值。