Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
引文
vue文檔列表渲染中有條注意事項(xiàng)：
這里提到的兩種情況實(shí)際改變了數(shù)據(jù)但是沒(méi)有觸發(fā)視圖更新。
由此引出Vue.set()，先上文檔API：
 |
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。
set方法調(diào)用時(shí)，可以觸發(fā)頁(yè)面全部重新渲染。
比如在vue中有個(gè)data數(shù)組arr：
//arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr) // [1,b,c]
可以看出set觸發(fā)了整個(gè)頁(yè)面的重新渲染，連arr[1]='b'的效果也被重新渲染了。
使用set添加數(shù)據(jù)
Vue.set()不光能修改數(shù)據(jù)，還能添加數(shù)據(jù)，彌補(bǔ)了Vue數(shù)組變異方法的不足。
可以使用set添加數(shù)據(jù)這一特性，解決一些常見(jiàn)問(wèn)題。
例如循環(huán)出的元素點(diǎn)擊應(yīng)用選中樣式，再點(diǎn)擊取消選中樣式。
<section v-for="item in list"> <div :class="['xxclass',item.checked?'checked':'']"></div> </section> <!--這里通過(guò)判斷item的**本身不存在的checked屬性**來(lái)決定是否增加checked樣式類(lèi)-->
點(diǎn)擊方法如下：
clickHandle: function(item){
if(typeof item.checked === 'undefined'){
this.$set(item, 'checked', true)
} else {
item.checked = !item.checked
}
}
// 如果item沒(méi)有checked屬性就用set方法添加，有則取反
這就利用set使用了對(duì)象中本身不存在的checked屬性來(lái)實(shí)現(xiàn)想要的功能。
深入響應(yīng)式原理
至于視圖更新時(shí)機(jī)可以看文檔深入響應(yīng)式原理
總結(jié)
以上所述是小編給大家介紹的Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
vue打包并部署到nginx上的實(shí)現(xiàn)示例
本文主要介紹了vue打包并部署到nginx上的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了vue中如何去掉input前后的空格問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)支持按周切換的日歷，根據(jù)實(shí)際開(kāi)發(fā)情況按每年、每月、每周進(jìn)行切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
element?ui?el-calendar日歷組件使用方法總結(jié)
這篇文章主要給大家介紹了關(guān)于element?ui?el-calendar日歷組件使用方法的相關(guān)資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue如何讀取本地文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
一次前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄,以上只是一部分Vue項(xiàng)目開(kāi)發(fā)中遇到的典型問(wèn)題和解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼
這篇文章主要介紹了Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式
這篇文章主要介紹了vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08