vue深度监听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>

    
    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>

handler

里面有两个参数 第一个是新的数据，还有一个是旧的数据

deep

如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化
deep：代表深度监控，不仅监控person变化，也监控person中属性变化

immediate

最初绑定的时候是不会执行的，要等到数据改变时才执行监听计算
immediate:true // 把immediate设置为true
// 加上这个就能在页面加载完毕后执行