Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項
更新時間：2018年08月30日 15:41:21 作者：無所事事者愛嘲笑
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項,需要的朋友可以參考下
引文
vue文檔列表渲染中有條注意事項：
這里提到的兩種情況實際改變了數(shù)據(jù)但是沒有觸發(fā)視圖更新。
由此引出Vue.set()，先上文檔API：
 |
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。
set方法調(diào)用時，可以觸發(fā)頁面全部重新渲染。
比如在vue中有個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ā)了整個頁面的重新渲染，連arr[1]='b'的效果也被重新渲染了。
使用set添加數(shù)據(jù)
Vue.set()不光能修改數(shù)據(jù)，還能添加數(shù)據(jù)，彌補了Vue數(shù)組變異方法的不足。
可以使用set添加數(shù)據(jù)這一特性，解決一些常見問題。
例如循環(huán)出的元素點擊應(yīng)用選中樣式，再點擊取消選中樣式。
<section v-for="item in list"> <div :class="['xxclass',item.checked?'checked':'']"></div> </section> <!--這里通過判斷item的**本身不存在的checked屬性**來決定是否增加checked樣式類-->
點擊方法如下：
clickHandle: function(item){
if(typeof item.checked === 'undefined'){
this.$set(item, 'checked', true)
} else {
item.checked = !item.checked
}
}
// 如果item沒有checked屬性就用set方法添加，有則取反
這就利用set使用了對象中本身不存在的checked屬性來實現(xiàn)想要的功能。
深入響應(yīng)式原理
至于視圖更新時機可以看文檔深入響應(yīng)式原理
總結(jié)
以上所述是小編給大家介紹的Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue使用Props實現(xiàn)組件數(shù)據(jù)交互的示例代碼
在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實現(xiàn)組件數(shù)據(jù)交互,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
隨著Vue.js越來越火,Vue.js 的相關(guān)插件也在不斷的被貢獻出來,數(shù)不勝數(shù),這篇文章主要給大家介紹了關(guān)于Vue插件實現(xiàn)過程中遇到的問題,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了vue中封裝組件的相關(guān)知識,文中的示例代碼講解詳細,對我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了vue腳手架項目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗,下面這篇文章主要給大家介紹了關(guān)于vite對瀏覽器的請求做了什么的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下2022-11-11
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue 獲取視頻時長的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08