Vue 對(duì)象和數(shù)據(jù)的強(qiáng)制更新方式
對(duì)象和數(shù)據(jù)的強(qiáng)制更新
數(shù)組更新
以下支持自動(dòng)更新
push()//向后添加pop()//刪除最后一個(gè)shift()//刪除第一個(gè)unshift()//向第一個(gè)添加元素splice()//向指定位置添加/刪除元素sort()//用原地算法對(duì)數(shù)組的元素進(jìn)行排序reverse()//將數(shù)組中元素的位置顛倒
注意，這種形式修改數(shù)據(jù) this.arr[1] = ‘x’ // 不是響應(yīng)性的，這種情況，可以采用splice方法修改數(shù)據(jù)即可實(shí)現(xiàn)更新
強(qiáng)制更新
this.$set(數(shù)組，下標(biāo)，修改后的值)
eg:this.$set(this.dataArr,1,{})對(duì)象更新
Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：
強(qiáng)制更新
this.$set(this.obj, ‘a(chǎn)ge', 27)
更新數(shù)據(jù)并強(qiáng)制更新視圖
在開發(fā)過(guò)程中，有時(shí)發(fā)現(xiàn)當(dāng)數(shù)據(jù)變動(dòng)后，視圖并未更新。那么下面是一些常見示例的和解決辦法
對(duì)象類型
當(dāng)對(duì)象為引用類型，vue不一定能監(jiān)控到 所以當(dāng)我們新建一個(gè)對(duì)象并賦值給oldObj字段的話，直接改變了它的指向地址=====》對(duì)象和數(shù)組都能用的方法：
this.$set(this,'oldArray',newArray); this.$set(this,'oldObj',newObj); this.$set(this.some.name,‘b',2)
數(shù)組類型
這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組。
push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue檢測(cè)到 ，filter(), concat(), slice() 。
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
異步類型
可在數(shù)據(jù)變化之后立即使用
Vue.nextTick(callback)
這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。
強(qiáng)制更新
this.$forceUpdate()，強(qiáng)制視圖更新
vue多層循環(huán)，動(dòng)態(tài)改變數(shù)據(jù)后渲染的很慢或者不渲染。
比如v-for里面數(shù)據(jù)層次太多， 修改過(guò)數(shù)據(jù)變了，頁(yè)面沒(méi)有重新渲染，需手動(dòng)強(qiáng)制刷新。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析
這篇文章主要介紹了vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過(guò)代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09
網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解
國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
Vue如何獲取url路由地址和參數(shù)簡(jiǎn)單示例
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過(guò)簡(jiǎn)單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對(duì)搜索欄進(jìn)行自定義，并通過(guò)按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-12-12
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
本篇文章主要介紹了vue組件中使用iframe元素的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12