快捷導(dǎo)航

vue中watch監(jiān)聽不到變化的解決

更新時(shí)間：2023年01月05日 08:31:54 作者：尤雨溪不懂VUE

本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

watch監(jiān)聽不到對(duì)象內(nèi)部的變化

有的時(shí)候vue會(huì)出現(xiàn)這種現(xiàn)象，無(wú)法監(jiān)聽到復(fù)雜對(duì)象內(nèi)部的變化：當(dāng)對(duì)象里面原本有某一個(gè)屬性，并對(duì)這個(gè)屬性操作時(shí)，watch是可以監(jiān)聽到當(dāng)前屬性的變化的。但是，若對(duì)象里面本沒有這個(gè)屬性的時(shí)候，在操作時(shí)將屬性添加進(jìn)去，同時(shí)包括之后對(duì)這個(gè)屬性的操作，watch是都檢測(cè)不到的。
這是因?yàn)関ue的watch會(huì)在初始化的時(shí)候通過object.defineProperty給對(duì)象的每一個(gè)屬性都添加watcher來(lái)監(jiān)聽內(nèi)部的變化。所以，后期添加上去的屬性是無(wú)法檢測(cè)到的。

解決方法：

如果想在初始化后添加一個(gè)屬性并進(jìn)行監(jiān)聽操作，可以使用$set：

// this.$set(object, key, value)
// 使用this.$set就可以監(jiān)聽到
this.$set(this.obj, 'a', Math.random())

watch的handler方法的兩個(gè)參數(shù)值相同

一個(gè)數(shù)據(jù)，如果值發(fā)生了變化，如果想要記錄變化前和變化后的兩個(gè)值，可以使用handler方法，第一個(gè)參數(shù)為變化后的新值，第二個(gè)為變化前的舊值。
但是如果這個(gè)值是復(fù)雜對(duì)象，如果想記錄里面的屬性的變化，使用handler，兩個(gè)參數(shù)均為變化后的新值。

解決方法：

結(jié)合計(jì)算屬性、序列化、反序列化生成新的對(duì)象，來(lái)避免此問題

 data () {
    return {
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差異內(nèi)容，可以結(jié)合計(jì)算屬性、序列化、反序列化生成新的對(duì)象，來(lái)避免此問題 。
    obj2 () {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        console.log('data變化了')
        console.log(newVal, oldVal)
      },
      deep: true
    }
  },

全部代碼

<template>
? <div>
? ? <button @click="clickFn">++++</button>
? </div>
</template>

<script>
export default {
? name: 'Mall',
? data () {
? ? return {
? ? ? // !監(jiān)聽時(shí)給每一個(gè)屬性都添加getter和setter，變化了，就觸發(fā)handler函數(shù)，如果后期添加屬性，這個(gè)屬性不可以被監(jiān)聽到
? ? ? // obj: {
? ? ? // ? a: 10
? ? ? // }

? ? ? // !這種是不可以被監(jiān)聽到的
? ? ? // 因?yàn)閣atch是通過Object.defineProperty()給對(duì)象的每一個(gè)現(xiàn)有屬性增加監(jiān)聽器
? ? ? // 在后面直接添加a屬性，身上沒有監(jiān)聽器，所以不會(huì)被監(jiān)聽到
? ? ? obj: {}
? ? }
? },
? computed: {
? ? // 如果想要得到差異內(nèi)容，可以結(jié)合計(jì)算屬性、序列化、反序列化生成新的對(duì)象，來(lái)避免此問題 。
? ? obj2 () {
? ? ? return JSON.parse(JSON.stringify(this.obj))
? ? }
? },
? watch: {
? ? obj2: {
? ? ? handler (newVal, oldVal) {
? ? ? ? console.log('data變化了')
? ? ? ? console.log(newVal, oldVal)
? ? ? },
? ? ? deep: true
? ? }
? },
? methods: {
? ? clickFn () {
? ? ? // this.obj.a = Math.random()

? ? ? // this.$set(object, key, value)
? ? ? // 使用this.$set就可以監(jiān)聽到
? ? ? this.$set(this.obj, 'a', Math.random())
? ? }
? }
}
</script>

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

您可能感興趣的文章: