const app = Vue.createApp({
        data() {
          return {
            message: "Hello Vue",
            info: { name: "kk", age: 18 },
          };
        },
        methods: {
          changeMessage() {
            this.message = "hello kk";
            this.info = { name: "kk" };
          },
        },

        watch: {
          // 1.默認(rèn)有兩個(gè)參數(shù)，newValue/oldValue
          message(newValue, oldVale) {
            console.log("message數(shù)據(jù)發(fā)生了變化", newValue, oldValue);
          },
          info(newValue, oldValue) {
            // 2.如果是對(duì)象類(lèi)型，那么拿到的是代理對(duì)象
            console.log("info數(shù)據(jù)發(fā)生了變化", newValue, oldValue);
            console.log(newValue.name, oldValue.name);

            // 3.獲取原始對(duì)象
            console.log({ ...newValue });

<div id="app">
      <h2>{{info.name}}</h2>
      <button @click="changeInfo">修改info</button>
    </div>

 const app = Vue.createApp({
        data() {
          return {
            info: { name: "kk", age: 18 },
          };
        },

        methods: {
          changeInfo() {
            // 創(chuàng)建一個(gè)對(duì)象，賦值給info
            this.info = { name: "kk" };

            // 直接修改對(duì)象里的一個(gè)屬性
            this.info.name = "kk";
          },
        },

        watch: {
          // 默認(rèn)watch監(jiān)聽(tīng)不會(huì)進(jìn)行深度監(jiān)聽(tīng)
          info(newValue, oldValue) {
            console.log("偵聽(tīng)到info改變", newValue, oldValue);
          },

          // 進(jìn)行深度監(jiān)聽(tīng)
          info: {
            handler(newValue, oldValue) {
              console.log("偵聽(tīng)到info改變", newValue, oldValue);
              console.log(newValue === oldValue);
            },

            // 監(jiān)聽(tīng)器選項(xiàng)
            // info進(jìn)行深度監(jiān)聽(tīng)
            deep: true,

            // 第一次渲染直接執(zhí)行一次監(jiān)聽(tīng)器
            immediate: true,
          },
        },

        "info.name": function (newValue, oldValue) {
          console.log("name發(fā)生改變", newValue, oldValue);
        },
      });

      app.mount("#app");