vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決
vue對(duì)象或數(shù)組中數(shù)據(jù)變化但視圖沒(méi)更新
由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。
但是我們還是有一些辦法來(lái)回避這些限制并保證它們的響應(yīng)性。
一、對(duì)于對(duì)象
**Vue 無(wú)法檢測(cè) property 的添加或移除。
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)式的
vm.b = 2
// `vm.b` 是非響應(yīng)式的對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。
但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式 property。
例如，對(duì)于：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你可能需要為已有對(duì)象賦值多個(gè)新 property，比如使用 Object.assign() 或 _.extend()。
但是，這樣添加到對(duì)象上的新 property 不會(huì)觸發(fā)更新。
在這種情況下，你應(yīng)該用原對(duì)象與要混合進(jìn)去的對(duì)象的 property 一起創(chuàng)建一個(gè)新的對(duì)象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })二、對(duì)于數(shù)組
Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
- 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：
vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：
vm.items.length = newLength
舉個(gè)例子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的為了解決第一類(lèi)問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個(gè)別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類(lèi)問(wèn)題，你可以使用 splice：
vm.items.splice(newLength)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
前端處理axios請(qǐng)求下載后端返回的文件流代碼實(shí)例
使用axios可以很方便地獲取后端返回的文件流數(shù)據(jù),并在前端直接在瀏覽器下載,這篇文章主要給大家介紹了關(guān)于前端處理axios請(qǐng)求下載后端返回的文件流的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue頁(yè)面切換和a鏈接的本質(zhì)區(qū)別詳解
今天小編就為大家分享一篇Vue頁(yè)面切換和a鏈接的本質(zhì)區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue 2.x基礎(chǔ)API的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了vue3中使用swiper及遇到的問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配
文章介紹了如何使用Vue和Electron開(kāi)發(fā)桌面端應(yīng)用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運(yùn)行和打包應(yīng)用等步驟,并分享了一些常見(jiàn)的打包錯(cuò)誤及其解決方法,感興趣的朋友一起看看吧2025-01-01
我們現(xiàn)在可以了解一下vue的過(guò)渡，vue在插入、更新以及移除DOM元素的時(shí)候，提供了很多不同方式過(guò)渡的效果，如果在css過(guò)渡自動(dòng)應(yīng)用class，在過(guò)渡鉤子函數(shù)中使用JavaScript直接操作DOM就可以了2022-08-08
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
詳解vue-resource promise兼容性問(wèn)題
這篇文章主要介紹了詳解vue-resource promise兼容性問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06