Vue中的偵聽器watch怎么使用

這篇文章主要介紹“Vue中的偵聽器watch怎么使用”，在日常操作中，相信很多人在Vue中的偵聽器watch怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中的偵聽器watch怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

偵聽器watch

1.初識偵聽器watch

watch：觀看，監(jiān)視

那么什么是偵聽器watch呢

• 開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中；

• 當(dāng)數(shù)據(jù)變化時，template會自動進行更新來顯示最新的數(shù)據(jù)；

• 但是在某些情況下，我們希望在代碼邏輯中監(jiān)聽某個數(shù)據(jù)的變化，這個時候就需要用偵聽器watch來完成了；

2.Vue的data的watch

案例：

• 我們希望用戶在input中輸入一個問題；

• 每當(dāng)用戶輸入了最新的內(nèi)容，我們就獲取到最新的內(nèi)容，并且使用該問題去服務(wù)器查詢答案；

• 那么，我們就需要實時的去獲取最新的數(shù)據(jù)變化；

• 此時就要用到偵聽器watch去監(jiān)聽數(shù)據(jù)是否發(fā)生變化

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.默認有兩個參數(shù)，newValue/oldValue
          message(newValue, oldVale) {
            console.log("message數(shù)據(jù)發(fā)生了變化", newValue, oldValue);
          },
          info(newValue, oldValue) {
            // 2.如果是對象類型，那么拿到的是代理對象
            console.log("info數(shù)據(jù)發(fā)生了變化", newValue, oldValue);
            console.log(newValue.name, oldValue.name);

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

3.Vue的watch偵聽選項

• 創(chuàng)建一個對象，賦值給info

• 點擊按鈕的時候會修改info.name的值

• 此時使用watch并不能偵聽info，因為默認情況下，watch只是在偵聽info的引用變化，對于內(nèi)部屬性的變化是不會做出響應(yīng)的

• 所以我們可以使用deep深度監(jiān)聽

• 希望一開始的就會立即執(zhí)行一次：這個時候我們使用immediate選項；無論數(shù)據(jù)是否變化，偵聽的函數(shù)都會有限執(zhí)行一次的

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

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

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

            // 直接修改對象里的一個屬性
            this.info.name = "kk";
          },
        },

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

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

            // 監(jiān)聽器選項
            // info進行深度監(jiān)聽
            deep: true,

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

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

      app.mount("#app");

到此，關(guān)于“Vue中的偵聽器watch怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>