Vue第一部分(6):Vue的生命周期
生活随笔
收集整理的這篇文章主要介紹了
Vue第一部分(6):Vue的生命周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
每個 Vue 實例在被創建時都要經過一系列的初始化過程 :創建實例,裝載模板,渲染模板、銷毀等。Vue為生命周期中的每個狀態都設置了鉤子函數(監聽函數)。當Vue實例處于不同的生命周期時,對應的函數就會被觸發調用。
生命周期圖示
下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西,不過隨著你的不斷學習和使用,它的參考價值會越來越高。
鉤子函數
每個 Vue 實例在被創建時都要經過一系列的初始化過程。同時在這個過程中也會運行一些叫做生命周期鉤子的函數,這些函數在生命周期的不同階段自動觸發執行,這給了用戶在不同階段添加自己的代碼的機會。
| beforeCreate(vue對象創建前) | 組件實例剛被創建,組件屬性計算之前,此時不能訪問屬性 |
| created(創建后) | 組件實例創建完,屬性可以訪問,但是還不能通過 $el 訪問DOM |
| beforeMount(加載前) | 模板編譯、掛載之前,可以通過 $el 訪問渲染前的DOM |
| mounted(載入后) | 模板編譯、掛載之后,可以通過 $el訪問渲染前的DOM |
| beforeUpdate(更新前) | 組件更新之前,可以獲取組件更新前的DOM |
| updated(更新后) | 組件更新之后,可以獲取組件更新后的DOM |
| beforeDestroy(銷毀前) | 組件銷毀前調用 |
| destroyed(銷毀后) | 組件銷毀后調用 |
通過以下案例,演示下各個鉤子函數的使用:
<div id="app"><h1>{{msg}}</h1><button @click="changeMsg">點我修改msg</button> </div><script>const vm = new Vue({el:"#app",data:{msg:"hell vue"},methods:{changeMsg(){this.msg = "hello baizhi";}},beforeCreate:function(){// alert("beforeCreate...");console.log("beforeCreate...");console.log(this.$el);//undefinedconsole.log(this.msg);//undefined},created:function(){// alert("created...");console.log("created...");console.log(this.$el);//undefinedconsole.log(this.msg);//hello vue},beforeMount:function(){// alert("beforeMount...");console.log("beforeMount...");console.log(this.$el);//加載前的標簽,就是原始代碼,插值表達式、事件綁定都還沒解析console.log(this.msg);//hello vue},mounted:function(){// alert("mounted...");console.log("mounted...");console.log(this.$el);//加載后的標簽,插值表達式、事件綁定均已解析console.log(this.msg);//hello vue},beforeUpdate:function(){// alert("beforeUpdated...");console.log("beforeUpdated...");console.log(this.$el.innerHTML);//更新前的DOMconsole.log(this.msg);//hello baizhi},updated:function(){// alert("updated...");console.log("updated...");console.log(this.$el.innerHTML);//更新后的DOMconsole.log(this.msg);//hello baizhi},beforeDestroy:function(){//在console中執行vm.$destroy()觸發,開發時很少關注// alert("destroyed...");console.log("beforeDestroy...");console.log(this.$el);console.log(this.msg);},destroyed:function(){// alert("destroyed...");console.log("destroyed...");console.log(this.$el);console.log(this.msg);}}) </script>說明:一般地,我們會在 created 鉤子函數中,從服務端獲取數據,并對數據進行初始化。
總結
以上是生活随笔為你收集整理的Vue第一部分(6):Vue的生命周期的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数字系统设计学习之VHDL输入设计
- 下一篇: php-cms,GitHub - lov