Vue中watch監(jiān)聽屬性新舊值相同的問題解決方案

更新時(shí)間：2023年08月10日 10:28:42 作者：前端李十三

這篇文章主要給大家分享了Vue中watch監(jiān)聽屬性新舊值相同問題解決方案,如果有遇到相同問題的朋友,可以參考閱讀本文

偵聽器 _watch:

作用:可以偵聽data和computed中數(shù)據(jù)的變化.

語法

watch: { "被偵聽的屬性名" (newVal, oldVal){ } }

監(jiān)聽簡單數(shù)據(jù)類型時(shí)可以直接使用,而監(jiān)聽復(fù)雜數(shù)據(jù)類型時(shí),例如當(dāng)我們只需要監(jiān)聽data或者computed中對象的某個(gè)屬性時(shí),可以使用字符串的形式進(jìn)行監(jiān)聽.

//舉例: 
watch: {
?    //字符串形式  表示監(jiān)聽item對象下的good_count屬性
?    'item.goods_count'(newval) {
?      if (newval <= 0) {
?        this.item.goods_count=1    
?      }
?    }
  }

在watch中，如果對對象進(jìn)行監(jiān)聽，只有對象obj被重新賦值時(shí)，watch才會被監(jiān)聽到，這個(gè)時(shí)候無法對obj里面的屬性的變化進(jìn)行監(jiān)聽,我們也可以給watch對象加上深度監(jiān)聽屬性.

      handler(newval, oldval) {
        console.log("完整寫法,監(jiān)聽復(fù)雜數(shù)據(jù)類型", newval);
      },
      deep: true, //表示開啟深度監(jiān)聽
      immediate: true, //立即監(jiān)聽,在頁面初始化時(shí),會監(jiān)聽一次
    }

而監(jiān)聽復(fù)雜數(shù)據(jù)類型,當(dāng)復(fù)雜數(shù)據(jù)類型被改變之后,newval的值改變,由于newval和oldval都指向同一個(gè)對象,導(dǎo)致oldval也會隨之改變,打印出來則沒有了old和new之分.

解決方法:在初始化的時(shí)候,深克隆一個(gè)oldval.

也有看其他人寫的文章解決方案,都大差不差,都是使用一個(gè)計(jì)算屬性加上深拷貝,看別人的回答時(shí)總感覺很拗口.于是自己總結(jié)了一下.

在我看來,解決此問題的關(guān)鍵在于:我們此時(shí)遇到的問題就是新值與舊值指向同一個(gè)地址的問題.而深拷貝的特點(diǎn)就是新開辟一個(gè)地址儲存需要拷貝對象的所有屬性.然后指向這個(gè)新地址. 故 JSON.parse(JSON.stringify())能完美解決其中的問題.然后與計(jì)算屬性合并達(dá)到監(jiān)聽的屬性一旦變化,自動新開辟一個(gè)地址,儲存新值.而新值與舊值指向的地址不同,則解決了新值與舊值相同的問題.

  <div id="app">
    <input type="text" v-model="lzy.age" />
  </div>
</template>
<script>
export default {
  name: "App",
  watch: {
    lzy2: {
      handler(newvalue, oldvalue) {
        console.log("新值");
        console.log(newvalue);
        console.log("舊值");
        console.log(oldvalue);
        console.log(oldvalue===this.lzy);
      },
      deep: true,
    },
  },
  data() {
    return {
      lzy: {
        gender: "man",
        age: 21,
      },
    };
  },
  computed: {
    lzy2(){
      return JSON.parse(JSON.stringify(this.lzy))
      // 因?yàn)橛?jì)算屬性一開始就執(zhí)行了一次,相當(dāng)于在一開始就深拷貝拿到了oldvalue,改變之后又再一次深拷貝,每一次深拷貝生成的對象都是指向不同的地址,所以oldvalue和newvalue是兩個(gè)不同的地址.
    },
  },
};
</script>
<style scoped>
</style>

到此這篇關(guān)于Vue中watch監(jiān)聽屬性新舊值相同問題解決方案的文章就介紹到這了,更多相關(guān)Vue watch監(jiān)聽屬性新舊值相同內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: