Vue中的偵聽器watch怎么使用

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

偵聽器watch

1.初識偵聽器watch

watch：觀看，監視

那么什么是偵聽器watch呢

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

• 當數據變化時，template會自動進行更新來顯示最新的數據；

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

2.Vue的data的watch

案例：

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

• 每當用戶輸入了最新的內容，我們就獲取到最新的內容，并且使用該問題去服務器查詢答案；

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

• 此時就要用到偵聽器watch去監聽數據是否發生變化

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

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

3.Vue的watch偵聽選項

• 創建一個對象，賦值給info

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

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

• 所以我們可以使用deep深度監聽

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

<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() {
            // 創建一個對象，賦值給info
            this.info = { name: "kk" };

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

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

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

            // 監聽器選項
            // info進行深度監聽
            deep: true,

            // 第一次渲染直接執行一次監聽器
            immediate: true,
          },
        },

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

      app.mount("#app");

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