Watch深度监听

watch是什么？

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

它有两种写法,一种是函数形式,一种是对象的形式,函数的话只能用基本数据类型,对象可以用引用数据类型。

当它如果是对象的话，函数形式的话,监听不到对象中属性的变化,因此我们需要开启深度监听的模式

    <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>

它有三个属性分别是：
deep：代表深度监听，它有两个值分别是是true或false,不仅能监听到person变化，也监听到person中属性变化。
handler：一个函数,可以得到最新的变化。
通过v.name和v.age获取对象中具体的值。
immediate：当进入页面的时候就会立即监听