快捷導(dǎo)航

vue中數(shù)據(jù)不響應(yīng)的問題及解決

更新時間：2022年09月24日 09:39:48 作者：那誰呀撒

這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue數(shù)據(jù)不響應(yīng)問題

將本來要新增的屬性提前在data中定義好

我可以提前在userInfo里面定義好，這樣就不是新增屬性了，就像下面這樣

data() {
? ? return {
? ? ? userInfo: {
? ? ? ? name: '子君',
? ? ? ? sex: '男',
? ? ? ? // 我先提前定義好
? ? ? ? officialAccount: ''
? ? ? }
? ? }
? }

直接替換掉userInfo

雖然無法給userInfo里面添加新的屬性，但是因為userInfo已經(jīng)定義好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面這樣寫

this.userInfo = {
? // 將原來的userInfo 通過擴展運算法復(fù)制到新的對象里面
? ...this.userInfo,
? // 添加新屬性
? officialAccount: '前端有的玩'
}

使用Vue.set

其實上面兩種方法都有點取巧的嫌疑，其實對于新增屬性，Vue官方專門提供了一個新的方法Vue.set用來解決新增屬性無法觸發(fā)數(shù)據(jù)響應(yīng)。

this.$set(this.userInfo,'officialAccount', '哈哈哈哈哈')

出現(xiàn)不響應(yīng)的原因可能是，后期在data中為一個數(shù)組中某個變量增加屬性…

解決的一種方法是，提前把這個屬性在data中聲明好，并賦初識默認(rèn)值，就交給vue管理了

1.vue由于javascript的限制，對象屬性的增加和刪除，不能及時更新視圖view

因為若一個對象的屬性沒有在data中聲明，則他就不是響應(yīng)式的。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，這樣的話這個對象屬性就是響應(yīng)式的。而執(zhí)行這個過程必須在data中聲明才會有。

var vm = new Vue({
? ? data:{
? ? ? ? a:1// vm.a 是響應(yīng)的
? ? }
})
vm.b = 2;// vm.b 是非響應(yīng)的

可以用set來解決這個問題

Vue.set(vm.someObject, 'b', 2);
//或者
this.$set(this.someObject,'b',2);

2.由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組

vm.items[indexOfItem] = newValue;
解決---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

vm.items.length = newLength;
解決---->
vm.items.splice(newLength)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: