Vue监听和深度监听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',
        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获取对象中具体的值。

watch监听的例子

理论：

watch在vue的文档中是这样解释的。
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
值是包括选项的对象：选项包括有三个。
第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数（进入页面就开始 监听）。