Vue不能檢測(cè)到Object/Array更新的情況的解決
前言
看文檔不認(rèn)真，開發(fā)也沒(méi)有多注意，總是hack。忽悠忽悠就過(guò)去，但怎么說(shuō)，歪門邪道還是不太好，現(xiàn)在就亡羊補(bǔ)牢，總結(jié)總結(jié)。
數(shù)組
索引
- 使用下標(biāo)更新數(shù)組元素；
- 使用賦值方式改變數(shù)組長(zhǎng)度；
- 使用下標(biāo)增刪數(shù)組元素；
正文
使用下標(biāo)更新數(shù)組元素
data: {
arrs: [0, 1, 2, 3]
}
直接使用this.arrs[0] = 'zero';雖然數(shù)組確實(shí)是被更新了，但是更新不會(huì)被渲染到視圖（html頁(yè)面）上。因?yàn)閂ue沒(méi)有檢測(cè)到數(shù)組的更新。
由于 JavaScript 的限制，Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
官方應(yīng)對(duì)方法：
1、Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
使用賦值方式改變數(shù)組長(zhǎng)度
即this.arrs.length = 100;無(wú)效！
官方應(yīng)對(duì)方法：
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下標(biāo)增刪數(shù)組元素
即一下操作無(wú)效：
this.arrs[this.arrs.length] = this.arrs.length;
官方應(yīng)對(duì)方法：變異方法。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
this.arrs.push(this.arrs.length);
8、替換數(shù)組(改變引用)
如官方所言：filter(), concat() 和 slice()都是會(huì)返回一個(gè)新數(shù)組
this.arrs = this.arrs.contact(this.arrs.length); // or // this.arrs = this.arrs.contact([this.arrs.length]);
官方對(duì)性能問(wèn)題的回應(yīng)：
你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表。幸運(yùn)的是，事實(shí)并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來(lái)的數(shù)組是非常高效的操作。
對(duì)象
索引
增刪元素；
正文
data: {
foo: { name: 'isaac' }
}
增刪元素
this.foo.job = 'coder'; delete this.foo.name;
如上增刪元素是無(wú)效的。
官方的解決方法：
// 新增 Vue.set(this.foo, 'job', 'coder'); // 刪除 Vue.delete(this.foo, 'name');
Vue.delete對(duì)數(shù)組也是有效傳送門
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中安裝element-ui失敗問(wèn)題原因及解決
Vue中安裝element-ui失敗問(wèn)題原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí)總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue工程師必會(huì)封裝的埋點(diǎn)指令思路知識(shí),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
最近項(xiàng)目中又使用了vue,所以來(lái)給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue的常用實(shí)例方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺(jué)挺重要的知識(shí)點(diǎn),感覺(jué)有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用
這篇文章主要給大家介紹了關(guān)于Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue CLI3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文詳細(xì)介紹了VueRouter 路由的概念、規(guī)則、基礎(chǔ)等相關(guān)內(nèi)容，文中運(yùn)用大量的圖片進(jìn)行講解，感興趣的小伙伴可以看一看這篇文章2021-08-08
vue中為什么在組件內(nèi)部data是一個(gè)函數(shù)而不是一個(gè)對(duì)象
這篇文章主要介紹了vue中為什么在組件內(nèi)部data是一個(gè)函數(shù)而不是一個(gè)對(duì)象,本文通過(guò)示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
最近小編在學(xué)習(xí)vue.js ,發(fā)現(xiàn)里面有好多好玩的東東，今天小編給大家分享Vue.js2.0中的變化，小編會(huì)在日后給大家持續(xù)更新的，感興趣的朋友參考下吧2017-10-10