Vue Watch监听

Vue Watch监听

watch监听单个属性基本数据类型是简单监视，复杂的数据类型深度监视

 <div id="app">
    <input type="text" v-model="msg">
    <h3>{{msg}}</h3>
    <button @click="arr[0].name='小板栗'">点击</button>
    <h2>{{arr[0].name}}</h2>
</div>

	new Vue({
        el:"#app",
        data() {
            return {
                msg:"",
                arr:[{name:"Chestnut"}]
            }
        },
        // 监听
        watch: {
            msg(newV,oldV){
                console.log(newV,oldV)
            },
            // 复杂的数据需要深度监听  object arr
            arr:{
                deep:true,//深度监听
                handler(newV,oldV){
                    console.log(newV,oldV);
                }
            }
        },
    })