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)文章
在我們的平時(shí)的工作中,在前后端交互的時(shí)候,為了提高頁(yè)面的觀賞性和用戶的體驗(yàn),我們會(huì)在頁(yè)面上添加loading來(lái)阻止用戶操作來(lái)等待接口的返回,這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的控制全局loading顯示的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+elementUI的表格最后一行合計(jì)自定義顯示方式
這篇文章主要介紹了vue+elementUI的表格最后一行合計(jì)自定義顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue請(qǐng)求后端接口導(dǎo)出excel表格方式
這篇文章主要介紹了Vue請(qǐng)求后端接口導(dǎo)出excel表格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Node.js實(shí)現(xiàn)Token無(wú)感刷新的全流程指南
這篇文章主要為大家詳細(xì)介紹了Vue+Node.js結(jié)合Axios實(shí)現(xiàn)Token無(wú)感刷新的全流程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-11-11
vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小的原理
這篇文章主要介紹了vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
Vue項(xiàng)目三級(jí)聯(lián)動(dòng)路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項(xiàng)目三級(jí)聯(lián)動(dòng)的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了js 實(shí)現(xiàn)拖拽排序，拖拽排序?qū)τ谛』锇閭儊?lái)說(shuō)應(yīng)該不陌生，平時(shí)工作的時(shí)候，可能會(huì)選擇使用類(lèi)似Sortable.js這樣的開(kāi)源庫(kù)來(lái)實(shí)現(xiàn)需求。但在完成需求后，大家有沒(méi)有沒(méi)想過(guò)拖拽排序是如何實(shí)現(xiàn)的呢？感興趣得話一起來(lái)看看下面文章得小心內(nèi)容吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例
下面小編就為大家分享一篇Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03