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

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

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

偵聽(tīng)器 _watch:

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

語(yǔ)法

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

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

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

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

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

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

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

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

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

  <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ì)算屬性一開(kāi)始就執(zhí)行了一次,相當(dāng)于在一開(kāi)始就深拷貝拿到了oldvalue,改變之后又再一次深拷貝,每一次深拷貝生成的對(duì)象都是指向不同的地址,所以oldvalue和newvalue是兩個(gè)不同的地址.
    },
  },
};
</script>
<style scoped>
</style>

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

您可能感興趣的文章: