快捷導(dǎo)航

Vue中實(shí)現(xiàn)深度監(jiān)聽的方法小結(jié)

更新時(shí)間：2024年09月02日 09:12:29 作者：qq_35430208

在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對(duì)象內(nèi)部的所有屬性,并對(duì)這些屬性的變化做出相應(yīng)的處理,在本篇博客中,我將為大家介紹Vue中如何實(shí)現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下

引言

在Vue中，深度監(jiān)聽是一種非常常見且重要的功能，它可以讓我們監(jiān)聽對(duì)象內(nèi)部的所有屬性，并對(duì)這些屬性的變化做出相應(yīng)的處理。在本篇博客中，我將為大家介紹Vue中如何實(shí)現(xiàn)深度監(jiān)聽的方法，并附上示例代碼以幫助大家更好地理解。

1. 使用`$watch`實(shí)現(xiàn)深度監(jiān)聽

Vue提供了`$watch`API來(lái)實(shí)現(xiàn)深度監(jiān)聽，通過(guò)設(shè)置`deep: true`即可對(duì)對(duì)象進(jìn)行深度監(jiān)聽。下面是一個(gè)示例代碼：

new Vue({
  data: {
    obj: {
      a: 123,
      b: 'hello'
    }
  },
  created() {
    this.$watch('obj', (newVal, oldVal) => {
      console.log('obj發(fā)生了變化', newVal, oldVal)
    }, { deep: true })
  },
  methods: {
    updateObj() {
      this.obj.a = 456
    }
  }
})

在上面的代碼中，我們首先定義了一個(gè)包含`obj`對(duì)象的Vue實(shí)例。然后在`created`鉤子中使用`$watch`來(lái)監(jiān)聽`obj`對(duì)象的變化，設(shè)置`deep: true`即可實(shí)現(xiàn)深度監(jiān)聽。當(dāng)執(zhí)行`updateObj`方法時(shí)，修改`obj.a`的值，控制臺(tái)將輸出`obj發(fā)生了變化 {a: 456, b: 'hello'} {a: 123, b: 'hello'}`。

2. 使用`Vue.set`實(shí)現(xiàn)深度監(jiān)聽

除了使用`$watch`，我們還可以通過(guò)`Vue.set`來(lái)實(shí)現(xiàn)深度監(jiān)聽。`Vue.set`可以確保在對(duì)象上添加新屬性時(shí)，能夠觸發(fā)響應(yīng)式更新。以下是一個(gè)示例代碼：

new Vue({
  data: {
    obj: {
      a: 123,
      b: 'hello'
    }
  },
  created() {
    Vue.set(this.obj, 'c', 'world')
  }
})

在上面的代碼中，我們使用`Vue.set`在`obj`對(duì)象上添加了一個(gè)新的屬性`c`。由于使用了`Vue.set`，Vue會(huì)自動(dòng)監(jiān)聽`c`屬性的變化，保證響應(yīng)式更新。

3. 使用`watch`屬性實(shí)現(xiàn)深度監(jiān)聽

除了使用`$watch`和`Vue.set`，我們還可以在組件的`watch`屬性中聲明一個(gè)監(jiān)聽器，實(shí)現(xiàn)深度監(jiān)聽。以下是一個(gè)示例代碼：

new Vue({
  data: {
    obj: {
      a: 123,
      b: 'hello'
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('obj發(fā)生了變化', newVal, oldVal)
      },
      deep: true
    }
  }
})

在上面的代碼中，我們?cè)赻watch`屬性中聲明了一個(gè)監(jiān)聽器，監(jiān)聽`obj`對(duì)象的變化，設(shè)置`deep: true`即可實(shí)現(xiàn)深度監(jiān)聽。