vue組件中重新渲染的3種方式小結(jié)
更新時間：2023年10月03日 10:56:40 作者：IT楓斗者
本文主要介紹了vue組件中重新渲染的3種方式小結(jié),主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價值,感興趣的可以了解一下
改變key
這個是最推薦的。因為vue是通過虛擬Dom算法來判斷元素的變化，是否變化的核心是通過判斷新舊元素的key值是否變化。如果你的key是變化的，則重新渲染該元素，如果key沒變，則不會重新渲染。
所以如果你想讓你的組件重新渲染，你給組件加上
key屬性，然后在需要重新渲染的時候，改變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也是比較多的。當你設(shè)置為
false的時候，當前條件塊里包含的元素會被銷毀，如果包含的是組件，則組件對應(yīng)的生命周期函數(shù)（beforeDestroy，destroyed等）會執(zhí)行。當你設(shè)置為
true的時候，當前條件塊里的元素會被重建，如果包含的是組件，則組件對應(yīng)的生命周期函數(shù)（created，mounted等），計算屬性，watch等會執(zhí)行，相當于重新渲染。
vm.$forceUpdate()
這個方法用的不多，是強制更新視圖。
到此這篇關(guān)于vue組件中重新渲染的3種方式小結(jié)的文章就介紹到這了,更多相關(guān)vue 重新渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2利用Bus.js如何實現(xiàn)非父子組件通信詳解
這篇文章主要給大家介紹了關(guān)于vue2利用Bus.js如何實現(xiàn)非父子組件通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2017-08-08
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
在Vue 2中實現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來捕獲屏幕或特定元素的截圖,以下是一個簡單的步驟和示例代碼來實現(xiàn)這個功能,需要的朋友可以參考下2023-10-10
Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作
這篇文章主要介紹了Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
svg-sprite-loader 的插件，用來根據(jù)導入的 svg 文件自動生成 symbol 標簽并插入 html，這篇文章主要介紹了VUE-cli3使用 svg-sprite-loader,需要的朋友可以參考下2018-10-10
vue vite之LogicFlow安裝核心依賴及項目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vuejs使用axios異步訪問時用get和post的實例講解
今天小編就為大家分享一篇vuejs使用axios異步訪問時用get和post的實例講解，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了詳解vue實現(xiàn)坐標拾取器功能示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11