如何手動銷毀Vue中掛載的組件
手動銷毀Vue掛載的組件
因為很多頁面需要用到<keep-alive>,我就用其將承載頁面的父組件包裹了,但這也帶來了一些問題。比如新寫的頁面中,進入下個頁面還在調(diào)用上個頁面的數(shù)據(jù)(以前沒有遇到過,不清楚是是什么原因),即已經(jīng)切換路由卻無法自己destory掉,打日志發(fā)現(xiàn)確實沒有跑destoryed這個生命周期函數(shù)。
如何解決
在需要刪除的組件中的deactivated生命周期函數(shù)中手動調(diào)用this.$destroy('componentName'),這里的componentName即這個組件的name,使用后發(fā)現(xiàn)destoryed函數(shù)確實可以正常使用了,而且進入下一個頁面也不會再報錯說缺少這個頁面的數(shù)據(jù)。
vue 銷毀實例
1.導(dǎo)入vue創(chuàng)建一個VM實例
傳入配置對象,了解配置對象中的各個屬性
var VM = new Vue({ el: '#app', // 表示當(dāng)我們new的這個Vue實例, 要控制頁面上的那個區(qū)域? data: { // data屬性中,存放的是el中要用到的數(shù)據(jù),這里的data就是MVVM中的M專門用來保存每個頁面的數(shù)據(jù) message: 'Hello Vue!' },? methods : {}, // 這個methods屬性中定義了當(dāng)前Vue實例所有可用的方法,主要寫業(yè)務(wù)邏輯? computed: {}, // 在computed中,可以定一些屬性, 這些屬性叫做計算屬性,計算屬性的本質(zhì)就是一個方法,只不過我們在使用這些計算屬性的時候是吧它們的名稱直接當(dāng)做屬性來使用的,并不會把計算屬性當(dāng)做方法去調(diào)用? filters : {}, // 這個filters屬性中定義了當(dāng)前Vue實例中所有可用的過濾的方法? watch: {}, // 使用這個屬性,可以監(jiān)聽data中數(shù)據(jù)的變化,然后觸發(fā)這個watch中對應(yīng)的function處理函數(shù) router, // 掛載路由對象? directives:{}, // 這個directives屬性定義了當(dāng)前Vue實例中所有可用的自定義指令 beforeCreate () {}, // 生命周期函數(shù): 表示實例完全被創(chuàng)建之前,會執(zhí)行這個函數(shù)? created () {}, // 生命周期函數(shù): 表示實例被創(chuàng)建之后? beforeMounted () {}, // 生命周期函數(shù): 表示模板已經(jīng)編譯完成,但是還沒有把模板渲染到頁面中? mounted () {}, // 生命周期函數(shù):表示模板已經(jīng)編譯完成,內(nèi)存中的模板已經(jīng)真實的渲染到了頁面中去,已經(jīng)可以看到渲染好的頁面了? beforeUpdate () {}, // 生命周期函數(shù): 表示當(dāng)前界面還沒有被更新,數(shù)據(jù)肯定被更新了? update () {}, // 生命周期函數(shù): 表示當(dāng)前頁面和數(shù)據(jù)保持同步了,都是最新的? beforeDestroy () {}, // 生命周期函數(shù): 表示Vue實例已經(jīng)從運行階段進入到銷毀階段? destroyed () {} // 生命周期函數(shù): 表示組件已經(jīng)完全被銷毀了})
2.vm.$destroy()只能銷毀實例里的方法但不能清除DOM和data嗎?
destroy()只是完全銷毀一個實例,清理它與其它實例的連接,解綁它的全部指令及事件監(jiān)聽器。
參見官方文檔: https://cn.vuejs.org/v2/api/#vm-destroy
它并不是用來清除已有頁面上的DOM的。實現(xiàn)功能包括:
(1) 包括Watcher對象從其所在Dep中釋放
if (vm._watcher) { ? vm._watcher.teardown() } let i = vm._watchers.length while (i--) { ? vm._watchers[i].teardown() } // remove reference from data ob // frozen object may not have observer. if (vm._data.__ob__) { ? vm._data.__ob__.vmCount-- }
(2) 移除所有事件的監(jiān)聽
vm.$off()
(3) patch一個null目的是觸發(fā)所有的destroy鉤子。
vm.__patch__(vm._vnode, null) return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) { ? ? /*vnode不存在則直接調(diào)用銷毀鉤子*/ ? ? if (isUndef(vnode)) { ? ? ? if (isDef(oldVnode)) invokeDestroyHook(oldVnode) ? ? ? return ? ? } ? ? ... ?}
想要清除頁面的 DOM,需要使用 v-if,或者修改 v-for 中涉及到的數(shù)組或?qū)ο蟆?/p>
另外,調(diào)用 app.$destroy() 之后,你會發(fā)現(xiàn),app.message = ‘Yes, he is a boy.’ 不會對頁面產(chǎn)生影響。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue路由組件的緩存keep-alive和include屬性的具體使用
:瀏覽器頁面在進行切換時,原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例,重點在于切換路由的時候,重新拉取列表數(shù)據(jù),接下來看看實現(xiàn)方法吧2021-05-05vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06vue實現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細介紹了vue實現(xiàn)導(dǎo)航欄效果,選中狀態(tài)刷新不消失,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12解決element-ui table設(shè)置列fixed時X軸滾動條無法拖動問題
這篇文章主要介紹了解決element-ui table設(shè)置列fixed時X軸滾動條無法拖動問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10