vue物件變化不渲染-前端問答-PHP中文網

vue物件變化不渲染

王林

發布： 2023-05-17 21:21:36

原創

1109 人瀏覽過

前言

Vue.js 是一款流行的 JavaScript 函式庫，它提供了一個簡單易用的框架，為使用者提供了一個高效的資料綁定和元件化程式的方法。然而，當我們使用 Vue.js 開發過程中，我們可能會遇到一些問題。其中一個常見的問題是，當元件的資料物件變化時，元件並沒有重新渲染，導致介面沒有改變。在這篇文章中，我們將探討這個問題的原因，以及如何解決這個問題。

主體

Vue.js 的核心想法是資料驅動視圖。當資料物件發生變化時，視圖會自動更新。這是透過 Vue.js 的響應式系統實現的。 Vue.js 會在元件定義時，將所有資料物件加入到一個響應式系統中。當資料物件的屬性發生變化時，響應式系統會自動偵測到變化，並且通知視圖進行更新。

然而，有時候我們會遇到這樣的問題，當資料物件的屬性改變時，視圖並沒有重新渲染。在這種情況下，我們需要仔細分析問題的原因，並找到解決方法。

首先，我們需要明確的是，當我們修改一個物件的屬性時，Vue.js 只會偵測該物件的直接屬性。當我們為該物件新增一個屬性時，Vue.js 並不會偵測到該屬性的變化。這是因為新加入的屬性並沒有被加入到響應式系統中。

例如，在下面的程式碼中，我們為一個物件新增了一個新屬性newProp：

const vm = new Vue({
  data: {
    obj: {
      prop1: 'value1',
      prop2: 'value2'
    }
  }
})

vm.obj.newProp = 'new value'

登入後複製

由於newProp 並沒有被加入到在響應式系統中，當我們修改newProp 的值時，視圖並不會重新渲染。

為了解決這個問題，我們可以使用Vue.js 提供的$set 方法，將新屬性加入到響應式系統中：

vm.$set(vm.obj, 'newProp', 'new value')

登入後複製

這樣，當我們修改newProp 的值時，視圖會自動重新渲染。

除了新屬性不會被偵測到外，當我們直接修改陣列中的元素時，也會出現類似的問題。例如，在下面的程式碼中，我們直接修改了陣列arr 中的元素：

const vm = new Vue({
  data: {
    arr: ['elem1', 'elem2', 'elem3']
  }
})

vm.arr[1] = 'new elem2'

登入後複製

由於Vue.js 並不會偵測陣列中元素的變化，視圖並不會重新渲染。

為了解決這個問題，我們可以使用Vue.js 提供的$set 方法，將修改後的元素替換原來的元素：

vm.$set(vm.arr, 1, 'new elem2')

登入後複製

這樣，當我們修改陣列中的元素時，視圖也會自動重新渲染。

另外，我們還需要注意的是，在某些情況下，我們可能需要手動強制更新視圖。例如，當我們使用計算屬性或偵聽器時，當計算屬性或偵聽器中的值發生變化時，視圖不會自動更新。我們需要使用$forceUpdate 方法來強制更新視圖：

const vm = new Vue({
  data: {
    value: 1
  },
  computed: {
    computedValue () {
      return this.value + 1
    }
  },
  methods: {
    update () {
      this.value++
      this.$forceUpdate()
    }
  }
})

登入後複製

總結

在Vue.js 開發過程中，當我們遇到元件資料物件變更時，元件當沒有重新渲染的問題時，我們需要考慮以下幾點：