快捷導(dǎo)航

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

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

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

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

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

解決方法：

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

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

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

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

解決方法：

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

 data () {
    return {
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差異內(nèi)容，可以結(jié)合計算屬性、序列化、反序列化生成新的對象，來避免此問題 。
    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)聽時給每一個屬性都添加getter和setter，變化了，就觸發(fā)handler函數(shù)，如果后期添加屬性，這個屬性不可以被監(jiān)聽到
? ? ? // obj: {
? ? ? // ? a: 10
? ? ? // }

? ? ? // !這種是不可以被監(jiān)聽到的
? ? ? // 因為watch是通過Object.defineProperty()給對象的每一個現(xiàn)有屬性增加監(jiān)聽器
? ? ? // 在后面直接添加a屬性，身上沒有監(jiān)聽器，所以不會被監(jiān)聽到
? ? ? obj: {}
? ? }
? },
? computed: {
? ? // 如果想要得到差異內(nèi)容，可以結(jié)合計算屬性、序列化、反序列化生成新的對象，來避免此問題 。
? ? 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: