vue組件中重新渲染的3種方式小結(jié)
改變key
這個(gè)是最推薦的。因?yàn)関ue是通過(guò)虛擬Dom算法來(lái)判斷元素的變化，是否變化的核心是通過(guò)判斷新舊元素的key值是否變化。如果你的key是變化的，則重新渲染該元素，如果key沒(méi)變，則不會(huì)重新渲染。
所以如果你想讓你的組件重新渲染，你給組件加上
key屬性，然后在需要重新渲染的時(shí)候，改變key的值就行。<template> ?<div class="home"> ? ?<el-button @click="freshKey">test</el-button> ? ?<aComp :key="key"></aComp> ?</div> </template> <script> import aComp from '@/components/aComp' export default { ?components: { ? ?aComp }, ?data () { ? ?return { ? ? ?key: 0 ? } }, ?methods: { ? ?freshKey () { ? ? ?this.key++ ? } } } </script>
v-if
我們用的指令中，
v-if也是比較多的。當(dāng)你設(shè)置為
false的時(shí)候，當(dāng)前條件塊里包含的元素會(huì)被銷(xiāo)毀，如果包含的是組件，則組件對(duì)應(yīng)的生命周期函數(shù)（beforeDestroy，destroyed等）會(huì)執(zhí)行。當(dāng)你設(shè)置為
true的時(shí)候，當(dāng)前條件塊里的元素會(huì)被重建，如果包含的是組件，則組件對(duì)應(yīng)的生命周期函數(shù)（created，mounted等），計(jì)算屬性，watch等會(huì)執(zhí)行，相當(dāng)于重新渲染。
vm.$forceUpdate()
這個(gè)方法用的不多，是強(qiáng)制更新視圖。
到此這篇關(guān)于vue組件中重新渲染的3種方式小結(jié)的文章就介紹到這了,更多相關(guān)vue 重新渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫(kù)里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它2023-04-04
Vue實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案
文章主要討論了在 Vue 開(kāi)發(fā)中實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點(diǎn)和適用情況,強(qiáng)調(diào)開(kāi)發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗(yàn),根據(jù)實(shí)際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下2025-03-03
element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例
因?yàn)殡S著功能的增多，table操作欄中的功能按鈕增多，這時(shí)候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了vue3 teleport的使用demo,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式
這篇文章主要介紹了vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-router中關(guān)于meta的作用及說(shuō)明
這篇文章主要介紹了vue-router中關(guān)于meta的作用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在本文里我們給大家整理了關(guān)于vue添加class樣式實(shí)例，對(duì)此有興趣的朋友們可以學(xué)習(xí)參考下。2019-02-02
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04