侦听器的其他方式

 

<template id="my-app">
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoNpcName">改变info.npc.name</button>

     <h3>
         {{info.name}}
         {{info.npc?info.npc.name : " "}}
     </h3>
</template>

data () {
    return {
        info: { 
            name: "Ale",
            age: 16,
            npc: {
                name: "LiLei"
            }
        }
    }
},
created() {
    this.unwatch = this.$watch("info", function(newVal, oldVal) {
        console.log(newVal, oldVal);
    }, {
        deep: true,
        immediate: true
    })
},
methods: {
    changeInfo() {
        this.info = {  name: "kobe" };
    },
    changeInfoName() {
        this.info.name = "Alice";
    },
    changeInfoNpcName() {
        this.info.npc.name = "Hanmeimei";
    }
}