在 Vue 中，如果直接對陣列進行操作，比如使用下標直接修改元素，陣列長度不變時， Vue 是無法監測到這種變化的，導致無法觸發視圖更新，針對該問題，總結如下解決方法：
一、使用 Vue.js 提供的方法來更新陣列
在 Vue.js 中，可以使用 Vue.set(target, key, value) 或 vm.$set(target, key, value) 來監測陣列變化，例如：
// 使用 Vue.set()
Vue.set(vm.items, indexOfItem, newValue)
// 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)除了上述方法之外，Vue.js 還提供了一些其它的方法來監測陣列變化，如 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()，這些方法都是基于陣列原型鏈上的方法，Vue.js 通過重寫這些方法來監測陣列變化，
例如，如果要在陣列末尾添加一個新的元素，可以使用 vm.items.push(newItem)，
你也可以使用vm.items.length = newLength來修改陣列長度，這樣也會觸發視圖更新，
總之，在 Vue.js 中，如果你想要監測陣列變化，最好使用 Vue.js 提供的方法來更新陣列，
二、使用專門用于監測陣列變化的語法糖
另外,Vue.js提供了一些專門用于監測陣列變化的語法糖，如 v-for 指令，它允許我們遍歷陣列并渲染每個元素，當陣列發生變化時，v-for 指令會自動重新渲染視圖，
三、使用Vue.observable()函式
還有，對于物件變化的監測,我們可以使用Vue.observable()函式來創建一個可監測的物件，
使用 Vue.observable() 可以避免使用 Vue.set() 或 vm.$set() 來監測物件的變化，
例如：
const obj = Vue.observable({
prop: 'value'
})四、使用 computed 屬性和 watch 屬性監測陣列變化
computed 屬性是 Vue.js 中的一種計算屬性，它可以根據其他屬性的值進行計算得到新的值，當其他屬性的值發生變化時，computed 屬性也會隨之變化，
watch 屬性是 Vue.js 中的一種監聽屬性，它可以監聽某個屬性的變化并執行相應的函式，
例如:
computed: {
filteredItems() {
return this.items.filter(item => item.age > 18)
}
},
watch: {
items: {
immediate: true,
handler() {
console.log('items changed')
}
}
}使用 computed 和 watch 屬性可以方便地監測陣列和物件的變化，并執行相應的操作，
五、使用 Deep Watcher 方法
watch: {
'myArray': {
deep: true,
handler: function (val) {
// do something with the new and old value of myArray
}
}
}當 deep 為 true 時，Vue 會遞回監測陣列中所有物件的變化，但是會帶來一些性能開銷，所以在實際使用中需要根據實際需要來確定是否使用 deep watcher，
六、使用 $watch 函式
mounted() {
this.$watch(
'myArray',
function(newVal, oldVal) {
// do something with the new and old value of myArray
},
{
deep: true
}
)
}$watch 方法接收三個引數，第一個是要監測的屬性，第二個是回呼函式，第三個是配置物件，可以使用 deep 選項來監測物件中的變化，
七、使用 Vue 的 $forceUpdate() 方法
使用 Vue 的 $forceUpdate() 方法來強制組件重新渲染，這樣就可以監測到陣列的變化，
this.$forceUpdate()這樣做會讓組件強制重新渲染, 但是這樣會有一些性能開銷,所以不建議在組件中頻繁使用 $forceUpdate()，
八、使用 Vue 中的 $nextTick() 方法
使用 Vue 中的 $nextTick() 方法來監測陣列變化，$nextTick() 函式可以在下一次 DOM 更新回圈結束之后執行延遲回呼，
this.$nextTick(() => {
// your code
})這樣可以確保在陣列變化之后再執行相關的操作，這樣就可以監測到陣列的變化，
九、使用 reactive 函式
在 Vue3 中可以使用 reactive 函式來創建回應式的陣列，這樣就可以監測到陣列的變化，
import { reactive } from 'vue'
const state = reactive({
myArray: [1, 2, 3]
})這樣Vue3就會自動監測 myArray 變化，
十、使用 vue-devtools 中的 track 功能
注意：該方法無法解決修改陣列未觸發視圖更新的問題，屬于陣列監測問題
總之，Vue.js 提供了多種方法來監測陣列和物件的變化，如使用 Vue.set()，splice()，$set()，$delete()，watch，computed，$watch()，vue-devtools 中的 “track” 功能，Vue3 中的 reactive 函式，$forceUpdate() 和 $nextTick() 等方法，可以根據需要選擇合適的方法來實作，
作者：yuzhihui出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542302.html
標籤：其他