vue數據變化但頁面刷新問題怎么解決

今天小編給大家分享一下vue數據變化但頁面刷新問題怎么解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue數據變化但頁面刷新

watch監聽到數據的變化但頁面沒有刷新

在數據改動的代碼后加 this.$forceUpdate();

添加this.$forceUpdate();進行強制渲染，效果實現。因為數據層次太多，render函數沒有自動更新，需手動強制刷新。

沒有監聽到數據的變化

例如：

改變了數組中的某一項或者改變了對象中的某個元素時，監聽則未生效。

數組若要觸發監聽，下面方法即可觸發

如：splice()，push() 等js方法

當然了，也可以使用vue中的方法 this.$set(object, index, new)

this.$set()方法是vue自帶的可對數組和對象進行賦值，并觸發監聽的方法。

• 第一個參數為你要改變的數組或對象

• 第二個參數為下標，或者元素名稱

• 第三個參數為新值 

改變了數據卻沒有自動刷新

有兩個按鈕，按鈕上有個number屬性，當此值為偶數時，按鈕顯示為紅色。

最初的數據如下：

"a": [{ name: "one" },{ name: "two",number: 2 }]

現象如下：當點擊第一個按鈕時，數據變了，界面卻沒有相應刷新；這是再點擊第二個按鈕，發現第二個按鈕是正常的，并且當第二個按鈕刷新的時候，第一個按鈕也跟著刷新了。

原因在于：a.number=undefined，這是一個常量，當第一次渲染時，第一個按鈕的class并沒有和第一個對象的屬性number進行綁定，所以當number變化時，不會觸發界面刷新。當第二個按鈕導致界面刷新時，第

一個按鈕也會跟著刷新界面。vue中提供了Vue.$forceUpdate()方法用于強制界面刷新。

說下結論

在綁定屬性時，不要綁定undefined的屬性，否則無法及時觸發界面刷新。

<template>
  <div>
    <span v-for="(x,ind) in a"
      :key="ind"
      @click="clickSpan(x)"
      :class="{redNumber:x.number%2==0}">
      {{x.name}}: {{x.number}}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      "a": [{ name: "one" },{ name: "two",number: 2 }]
    }
  },
  methods: {
    clickSpan(x) {
      if (!x.number) x.number = 0;
      x.number += 1
    }
  }
}
</script>

<style>
.redNumber {
  color: red;
}
* {
  font-size: 20px;
  user-select: none;
}
</style>

以上就是“vue數據變化但頁面刷新問題怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。