91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

VUE3中watch監聽使用的方法有哪些

發布時間:2022-06-07 13:39:00 來源:億速云 閱讀:1094 作者:iii 欄目:開發技術

這篇文章主要介紹“VUE3中watch監聽使用的方法有哪些”,在日常操作中,相信很多人在VUE3中watch監聽使用的方法有哪些問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”VUE3中watch監聽使用的方法有哪些”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

    watch介紹

    vue中watch用來監聽數據的響應式變化.獲取數據變化前后的值

    watch的完整入參

    watch(監聽的數據,副作用函數,配置對象)
    watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

    watch監聽的不同情況

    創建響應式數據

    import { ref, watch, reactive } from "vue";
    let name = ref("moxun");
    let age = ref(18);
    let person = reactive({
      Hobby: "photo",
      city: {
        jiangsu: {
          nanjing: "雨花臺",
        },
      },
    });

    1 監聽單個refimpl數據

    watch(name, (newName, oldName) => {
      console.log("newName", newName);
    });

    2 監聽多個refimpl數據

    方式一:vue3允許多個watch監聽器存在

    watch(name, (newValue, oldValue) => {
      console.log("new", newValue, "old", oldValue);
    });
    watch(age, (newValue, oldValue) => {
      console.log("new", newValue, "old", oldValue);
    });

    方式二:將需要監聽的數據添加到數組

    watch([name, age], (newValue, oldValue) => {
      // 返回的數據是數組
      console.log("new", newValue, "old", oldValue);
    });

    3 監聽proxy數據

    注意

    1.此時vue3將強制開啟deep深度監聽

    2.當監聽值為proxy對象時,oldValue值將出現異常,此時與newValue相同

    // 監聽proxy對象
    watch(person, (newValue, oldValue) => {
      console.log("newValue", newValue, "oldValue", oldValue);
    });

    4 監聽proxy數據的某個屬性

    需要將監聽值寫成函數返回形式,vue3無法直接監聽對象的某個屬性變化

    watch(
      () => person.Hobby,
      (newValue, oldValue) => {
        console.log("newValue",newValue, "oldvalue", oldValue);
      }
    );

    注意

    當監聽proxy對象的屬性為復雜數據類型時,需要開啟deep深度監聽

    watch(
      () => person.city,
      (newvalue, oldvalue) => {
        console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
      },{
        deep: true
      }
    );

    5 監聽proxy數據的某些屬性

    watch([() => person.age, () => person.name], (newValue, oldValue) => {
      // 此時newValue為數組
      console.log("person.age", newValue, oldValue);
    });

    到此,關于“VUE3中watch監聽使用的方法有哪些”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    成安县| 锦州市| 宿州市| 南木林县| 剑川县| 富平县| 普安县| 长泰县| 岳西县| 佛教| 东兰县| 呼伦贝尔市| 庄浪县| 柳江县| 隆尧县| 江山市| 台江县| 杭州市| 垫江县| 阜康市| 科技| 望奎县| 安徽省| 灌阳县| 永泰县| 松溪县| 玉环县| 达拉特旗| 黎城县| 翁牛特旗| 高碑店市| 阿巴嘎旗| 康乐县| 望谟县| 鹿泉市| 临沧市| 邹城市| 漳平市| 略阳县| 大石桥市| 渝中区|