vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解

更新時間：2023年07月06日 10:14:01 作者：不掉頭發(fā)！

監(jiān)聽數(shù)據(jù)變化，在Vue中是通過偵聽器來實現(xiàn)的，你也可以將它理解為監(jiān)聽器，時刻監(jiān)聽某個數(shù)據(jù)的變化，本文將通過代碼示例為大家詳細的介紹一下vue watch如何監(jiān)聽數(shù)據(jù)變化,需要的朋友可以參考下

watch的基本用法

這一次我們要添加的是watch屬性。下面我們先來眼熟一下偵聽器的添加位置：

<script>
    export default {
        name: "app",
        // 數(shù)據(jù)
        data() {
            return {};
        },
        // 方法
        methods:{},
        // 偵聽器
        watch:{}
    };
    </script>

一個簡單的例子：

 <template>
       <p>你點擊按鈕的次數(shù)是： {{ count }} </p>
       <button @click="add" v-model="count">點擊</button>
   </template>
   <script>
   export default {
       name: "app",
       data(){
           return {
               count:0
           }
       },
       methods:{
           add(){
               this.count++;
           }
       },
       watch:{
           // 被偵聽的變量count
           count(){
               console.log('count 發(fā)生了變化');
           }
       }
   };
   </script>

偵聽器更多的是用在異步操作中，所謂異步操作就是數(shù)據(jù)返回有所延遲的操作，比如說我們要請求后端的接口，接口會返回給我們數(shù)據(jù)，然后我們再將數(shù)據(jù)渲染在頁面上。

從請求接口到返回數(shù)據(jù)，這中間需要一定的時間，此時我們就可以用偵聽器來偵聽返回的數(shù)據(jù)，當數(shù)據(jù)返回以后，我們再觸發(fā)渲染。

模擬一個偽異步操作：

    <template>
        <input type="text" v-model="inputValue">
        <p>從輸入框中獲取到的數(shù)據(jù)：{{ passedInputValue }}</p>
    </template>
    <script>
    export default {
        name: "app",
        data(){
            return {
                inputValue: '',
                passedInputValue: ''
            }
        },
        watch:{
            inputValue() {
                // 當inputValue數(shù)據(jù)發(fā)生變化以后，延遲三秒賦值給passedInputValue
                setTimeout(() => {
                    this.passedInputValue = this.inputValue;
                }, 3000)
            }
        }
    };
    </script>

此時你就會發(fā)現(xiàn)，當你在input輸入框中輸入文字以后，p標簽內(nèi)的數(shù)據(jù)不是立馬改變，而是過三秒才會去渲染

獲取前一次的值

在某些場景中，我們會需要上一次的數(shù)據(jù)，此時，偵聽器就可以給我們兩個值，舊值和新值

在上一個案例的基礎上，我們只需要添加一個參數(shù)，即可獲取舊值，代碼如下：

watch:{
        inputValue(value,oldValue) {
            // 第一個參數(shù)為新值，第二個參數(shù)為舊值，不能調(diào)換順序
            console.log(`新值：${value}`);
            console.log(`舊值：${oldValue}`);
        }
    }

handler方法和immediate屬性

前面我們已經(jīng)知道，當我們偵聽的值沒有發(fā)生改變的時候，是不會觸發(fā)偵聽器的，并且，頁面第一次渲染的時候也不會觸發(fā)偵聽器。

但是現(xiàn)在我有個需求就是要讓頁面第一次渲染的時候就去觸發(fā)偵聽器呢？
此時就要用到一個方法和一個屬性：immediate

    <template>
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </template>
    <script>
    export default {
        name: "app",
        data(){
            return {
                firstName: 'Su',
                lastName: 'Junyang',
                fullName: ''
            }
        },
        watch:{
            firstName: {
                handler(newName, oldName) {
                    this.fullName = newName + ' ' + this.lastName;
                },
                // 如果設置了false，那么在頁面第一次渲染以后不會觸發(fā)偵聽器
                immediate: true
            }
        }
    };
    </script>

deep 深度偵聽

所謂深度偵聽就是偵聽對象內(nèi)部屬性的值。

我們之前用的偵聽器都只能偵聽一個變量的變化，（重點看一下代碼中的注釋）例如：

data:{
    return {
        // 字符串發(fā)生變化，可以偵聽
        firstName: 'Su',
        room:{
            name:"大床房",
            // 當房號發(fā)生變化的時候，偵聽器并不能偵聽到。
            // 因為偵聽器只偵聽到room，不能偵聽number或者name
            number: 302
        }
    }
},

此時我們就需要深度偵聽，深度偵聽在代碼上并不難實現(xiàn)，只需要在handler的基礎上添加一個deep屬性，代碼如下：

watch:{
    room:{
        handler(newRoom,oldRoom){
            console.log("房間號發(fā)生了變化")
        },
        deep: true
    }
}

案例：使用偵聽器和定時器實現(xiàn)偽模糊搜索

 <template>
      <div class="search">
        <input type="text" v-model="inputValue" />
        <div class="search-block" v-for="(element, index) in results" :key="index">
          {{ element }}
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
      data() {
        return {
          results: [],
          mockData: [
            '浙江大學',
            '中國人民大學',
            '清華大學',
            '清華大學附屬中學',
            '浙江理工大學',
            '浙江工業(yè)大學'
          ],
          inputValue: ''
        };
      },
      watch: {
        inputValue(value) {
          if (!!value) {
            setTimeout(() => {
              this.results = this.mockData.filter(el => {
                console.log(value);
                return el.indexOf(value) !== -1;
              });
            }, 300);
          }
        }
      }
    };
    </script>

到此這篇關(guān)于vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽數(shù)據(jù)變化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: