Vue不能檢測到Object/Array更新的情況的解決
前言
看文檔不認(rèn)真,開發(fā)也沒有多注意,總是hack。忽悠忽悠就過去,但怎么說,歪門邪道還是不太好,現(xiàn)在就亡羊補(bǔ)牢,總結(jié)總結(jié)。
數(shù)組
索引
- 使用下標(biāo)更新數(shù)組元素;
- 使用賦值方式改變數(shù)組長度;
- 使用下標(biāo)增刪數(shù)組元素;
正文
使用下標(biāo)更新數(shù)組元素
data: { arrs: [0, 1, 2, 3] }
直接使用this.arrs[0] = 'zero'
;雖然數(shù)組確實(shí)是被更新了,但是更新不會(huì)被渲染到視圖(html頁面)上。因?yàn)閂ue沒有檢測到數(shù)組的更新。
由于 JavaScript 的限制,Vue 不能檢測以下變動(dòng)的數(shù)組:
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí),例如:vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(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ù)組長度
即this.arrs.length = 100;無效!
官方應(yīng)對(duì)方法:
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下標(biāo)增刪數(shù)組元素
即一下操作無效:
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ì)性能問題的回應(yīng):
你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表。幸運(yùn)的是,事實(shí)并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法,所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。
對(duì)象
索引
增刪元素;
正文
data: { foo: { name: 'isaac' } }
增刪元素
this.foo.job = 'coder'; delete this.foo.name;
如上增刪元素是無效的。
官方的解決方法:
// 新增 Vue.set(this.foo, 'job', 'coder'); // 刪除 Vue.delete(this.foo, 'name');
Vue.delete對(duì)數(shù)組也是有效傳送門
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02vue3中g(shù)etCurrentInstance獲取組件實(shí)例踩坑詳細(xì)記錄
getCurrentInstance()是Vue.js3?Composition?API中的一個(gè)函數(shù),它的作用是獲取當(dāng)前組件的實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance獲取組件踩坑的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue3源碼分析reactivity實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Vue3源碼分析reactivity實(shí)現(xiàn)方法原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue3實(shí)現(xiàn)列表無限滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)列表無限滾動(dòng)的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07vue、react等單頁面項(xiàng)目部署到服務(wù)器的方法及vue和react的區(qū)別
這篇文章主要介紹了vue、react等單頁面項(xiàng)目部署到服務(wù)器的方法,需要的朋友可以參考下2018-09-09利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果展示
這篇文章主要介紹了利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動(dòng)畫效果,我們可以實(shí)現(xiàn)非??犰诺臄?shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動(dòng)感和吸引力,需要的朋友參考下吧2024-04-04Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04