watch深度监听

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)
            }，
            deep: true
        }
    })
    </script>

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

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