vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決
vue數(shù)據(jù)不響應(yīng)問(wèn)題
將本來(lái)要新增的屬性提前在data中定義好
我可以提前在userInfo里面定義好，這樣就不是新增屬性了，就像下面這樣
data() {
? ? return {
? ? ? userInfo: {
? ? ? ? name: '子君',
? ? ? ? sex: '男',
? ? ? ? // 我先提前定義好
? ? ? ? officialAccount: ''
? ? ? }
? ? }
? }直接替換掉userInfo
雖然無(wú)法給userInfo里面添加新的屬性，但是因?yàn)閡serInfo已經(jīng)定義好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面這樣寫(xiě)
this.userInfo = {
? // 將原來(lái)的userInfo 通過(guò)擴(kuò)展運(yùn)算法復(fù)制到新的對(duì)象里面
? ...this.userInfo,
? // 添加新屬性
? officialAccount: '前端有的玩'
}使用Vue.set
其實(shí)上面兩種方法都有點(diǎn)取巧的嫌疑，其實(shí)對(duì)于新增屬性，Vue官方專(zhuān)門(mén)提供了一個(gè)新的方法Vue.set用來(lái)解決新增屬性無(wú)法觸發(fā)數(shù)據(jù)響應(yīng)。
this.$set(this.userInfo,'officialAccount', '哈哈哈哈哈')
出現(xiàn)不響應(yīng)的原因可能是，后期在data中為一個(gè)數(shù)組中某個(gè)變量增加屬性…
解決的一種方法是，提前把這個(gè)屬性在data中聲明好，并賦初識(shí)默認(rèn)值，就交給vue管理了
vue數(shù)據(jù)響應(yīng)不及時(shí)問(wèn)題
1.vue由于javascript的限制，對(duì)象屬性的增加和刪除，不能及時(shí)更新視圖view
因?yàn)槿粢粋€(gè)對(duì)象的屬性沒(méi)有在data中聲明，則他就不是響應(yīng)式的。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，這樣的話(huà)這個(gè)對(duì)象屬性就是響應(yīng)式的。而執(zhí)行這個(gè)過(guò)程必須在data中聲明才會(huì)有。
var vm = new Vue({
? ? data:{
? ? ? ? a:1// vm.a 是響應(yīng)的
? ? }
})
vm.b = 2;// vm.b 是非響應(yīng)的可以用set來(lái)解決這個(gè)問(wèn)題
Vue.set(vm.someObject, 'b', 2); //或者 this.$set(this.someObject,'b',2);
2.由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(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)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue之webpack -v報(bào)錯(cuò)解決方案總結(jié)
這篇文章主要介紹了vue之webpack -v報(bào)錯(cuò)解決方案總結(jié),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue elementUI實(shí)現(xiàn)拖拽流程圖效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)vue elementUI實(shí)現(xiàn)拖拽流程圖效果,不引入插件,純手寫(xiě)實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
MPEGTS.js是一個(gè)輕量級(jí)的JavaScript庫(kù),用于處理MPEG-TS流,這篇文章主要給大家介紹了關(guān)于vue使用mpegts.js的詳細(xì)步驟記錄,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue Promise解決回調(diào)地獄問(wèn)題實(shí)現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問(wèn)題，總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2023-01-01
這篇文章主要介紹了Axios代理配置及封裝響應(yīng)攔截處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
VuePress使用Algolia實(shí)現(xiàn)全文搜索
這篇文章主要為大家介紹了VuePress使用Algolia實(shí)現(xiàn)全文搜索示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Hexo已經(jīng)看膩了，來(lái)手把手教你使用VuePress搭建個(gè)人博客
vuepress是尤大大4月12日發(fā)布的一個(gè)全新的基于vue的靜態(tài)網(wǎng)站生成器，實(shí)際上就是一個(gè)vue的spa應(yīng)用，內(nèi)置webpack，可以用來(lái)寫(xiě)文檔。這篇文章給大家介紹了VuePress搭建個(gè)人博客的過(guò)程，感興趣的朋友一起看看吧2018-04-04
這篇文章主要介紹了詳解mpvue開(kāi)發(fā)小程序小總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開(kāi)發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下2022-03-03