vue3改了4個生命週期函數。 Vue3組合式api取消了beforeCreated和created鉤子函數,採用steup鉤子代替,且裡面不能使用this。 Vue3裡面的組件銷毀的鉤子函數由destroyed和beforeDestroy換成了beforeUnmount和unmounted。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
Vue實例有一個完整的生命週期,也就是從new Vue()、初始化事件(.once事件)和生命週期、編譯模版、掛載Dom -> 渲染、更新- > 渲染、卸載
等⼀系列過程,稱這是Vue的生命週期。
vue應用程式中有4個主要事件(8個鉤子):
#建立---- 在組成建立時執行
掛載---- DOM被掛載時執行
更新---- 當回應資料被修改時執行
銷毀----在元素被銷毀之前立即執行
資料監控(getter和setter)和初始化事件還沒開始,此時data 的回應式追蹤、
event/watcher 都還沒被設定
不能存取data、computed、watch、methods上的方法和資料。
建立完成後會自動執行函數
在掛載開始之前被呼叫,相關的render函數首次被呼叫。
這次Vue開始解析模板,產生虛擬DOM存在記憶體中,還沒有把虛擬DOM轉換成真實DOM,插入頁面中
在el被新創建的vm.$el(就是真實DOM的拷貝)替換,並掛載到實例上去之後調用(將內存中的虛擬DOM轉為真實DOM,真實DOM插入頁面)。一般在這個階段進行:開啟計時器,發送網路請求,訂閱訊息,綁定自訂事件等等
响应式数据更新时调用,此时虽然响应式数据更新,但是对应的真实 DOM 还没有被渲染(数据是新的,但页面是旧的,页面和数据没保持同步呢)。由於資料變更導致的虛擬DOM重新渲染和打補丁之後調用。
呼叫時,元件 DOM已經更新,所以可以執行依賴DOM的操作。然而在大多數情況下,應避免在此期間更改狀態,因為這可能會導致更新無限循環
實例銷毀之前呼叫
在這個階段一般進行關閉計時器,取消訂閱訊息,解綁自訂事件。
nbsp;html> <meta> <title>分析生命周期</title> <!-- 引入Vue --> <script></script> <!-- 准备好一个容器--> <div> <h2></h2> <h2>当前的n值是:{{n}}</h2> <button>点我n+1</button> <button>点我销毁vm</button> </div> <script> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', // template:` // <div> // <h2>当前的n值是:{{n}} // <button @click="add">点我n+1 // // `, data:{n:1}, methods: { add(){ console.log('add') this.n++ }, bye(){ console.log('bye') this.$destroy() } }, watch:{ n(){ console.log('n变了') } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') }, }) </script>
常用的生命週期鉤子:1.mounted: 發送ajax請求、啟動計時器、綁定自訂事件、訂閱訊息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁定自訂事件、取消訂閱訊息等【收尾工作】
關於銷毀Vue實例:
(1)銷毀後借助Vue開發者工具看不到任何資訊.
(2)銷毀後自訂事件會失效,但原生DOM事件依然有效。
(3)一般不會在beforeDestroy操作數據,因為即便操作數據,也不會再觸發更新流程了。
在掛載之前被調用,渲染函數render首次被調用
元件掛載時呼叫
##資料更新時調用,發生在虛擬DOM打補丁之前。
在卸載元件實例之前調用,此階段的實例依舊是正常的。
#卸載元件實例後調用,呼叫此鉤子時,元件實例的所有指令都被解除綁定,所有事件偵聽器都被移除,所有子元件實例被卸載。
vue3 | |
---|---|
setup() 開始建立元件之前,建立的是data和method | |
setup() | |
onBeforeMount 元件掛載到節點上之前執行的函數。 | |
onMounted 元件掛載完成後執行的函數 | |
onBeforeUpdate 元件更新之前執行的函數。 | |
onUpdated 元件更新完成之後執行的函數。 | |
onBeforeUnmount 元件掛載到節點上先前執行的函數。 | |
onUnmounted 元件卸載先前執行的函數。 |
總結:
#1、Vue3 組合式api取消了beforeCreated 和created 鉤子函數, 採用steup鉤子代替且裡面不能使用this 2、Vue3裡面的元件銷毀的鉤子函數換成了beforeUnmount 和unmounted 之前是destroyed和beforeDestroy 但是要注意如果Vue3 使用Vue2 的選擇式寫法之前的鉤子函數還是可以使用3、Vue3的組合式api生命週期函數要比Vue2 選擇式api 的生命週期多個前綴on ,而且要import 單獨引入相關推薦:
以上是vue3改了幾個生命週期函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!