vue生命週期簡介

阿新 • • 發佈：2018-11-17

vue生命週期簡介

生命週期的鉤子 LifeCycle hooks

上面已經能夠清晰的看到vue2.0都包含了哪些生命週期的鉤子函式~~

那麼執行順序以及什麼時候執行，我們上程式碼來看~~~

生命週期鉤子函式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport 
" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:  
"#app",
        data: {
            message: "hello gaoxin!!"
        },
        beforeCreate: function () {
            console.group("beforeCreate  建立例項之前===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // undefined
            console.log(" 
message: " + this.message);
        },
        created: function () {
            console.group("Created:  建立例項完成===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        beforeMount: function () {
            console.group("beforeMount  掛載前狀態==========");
            console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        mounted: function () {
            console.group("Mounted  掛載結束狀態=============");
            console.log("el: " + this.$el); // 已被初始化
            console.log("data: " + this.$data); // 已被初始化
            console.log("message: " + this.message); // 已被初始化
        },
        beforeUpdate: function () {
            console.group("beforeUpdate  更新前狀態=========");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group("Updated  更新完成狀態");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        beforeDestroy: function () {
            console.group("beforeDestroy  例項銷燬之前");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        },
        destroyed: function () {
            console.group("Destoryed  例項銷燬之後");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        }

    })
</script>


</body>
</html>

生命週期鉤子函式

create 和 mounted 相關

執行上面程式碼，可以看到：

　　beforecreated ：el 和 data 並未初始化

　　created：完成了data資料的初始化 el 沒有

　　beforeMount：完成了el 和 data的初始化

　　mounted：完成了掛載

也就是說~掛載前的狀態是虛擬DOM技術，先把坑站住了~掛載之後才真正的把值渲染進去~

update 相關

我們在瀏覽器console裡執行命令：

　　app.message = "hello~"

我們就出發了update相關的鉤子函式~也就是說data裡的值被修改會出發update的操作~

destroy 相關

我們在瀏覽器console裡執行命令：

　　app.$destroy();

觸發了destroy相關的鉤子函式，也就是說元件被銷燬~

更改message的值~DOM中的值不變~也就是說DOM元素依然存在只是不受vue控制了~~

vue生命週期簡介

vue生命週期簡介生命週期的鉤子 LifeCycle hooks 上面已經能夠清晰的看到vue2.0都包含了哪些生命週期的鉤子函式~~ 那麼執行順序以及什麼時候執行，我們上程式碼來看~~~ 生命週期鉤子函式 <!DOCTYPE html> <html lang="

Vue生命週期中的 mounted

mounted() { } //真實dom渲染完了，可以操作dom了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

標註圖+部分舉例聊聊Vue生命週期

“你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。” 現在專案中遇到了，好好回頭總結一波Vue生命週期，以後用到的時候再來翻翻。啥叫Vue生命週期？每個 Vue 例項在被建立時都要經過一系列的初始化過程。例如：從開始建立、初始化資料、編譯模板、掛載Dom、資料變化

vue生命週期，鉤子函式

vue生命週期簡介和鉤子函式一、vue生命週期簡介咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函數了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。二、生命週期探究對於執行順序和什麼時候執行，看上面圖基本有個瞭解了。下面我們將結

Vue生命週期函式詳解

vue例項的生命週期 1 什麼是生命週期（每個例項的一輩子）概念：每一個Vue例項建立、執行、銷燬的過程，就是生命週期；在例項的生命週期中，總是伴隨著各種事件，這些事件就是生命週期函式；生命週期：例項的生命週期，就是一個階段，從建立到執行，再到銷燬的階段；生命週期函式：在例項的生命週

vue 生命週期~~

　　4個階段: 1. 建立（create）階段：建立元件物件，和模型資料物件 &nb

vue 生命週期梳理

前言在使用vue開發過程中經常會接觸到生命週期的問題，但對於每個鉤子函式都做了什麼，應用場景比較模糊，希望通過這次梳理讓自己清楚一些。初次寫文章，有不對的地方還望各位多多指正！ 1. vue例項化過程從vue例項化開始分析，我們通過new Vue來例項化來檢視一下原始碼在 src/core/ins

spring作用域與生命週期簡介

1. spring 作用域使用scope屬性指定bean的作用域，預設值為singleton singleton 即單例模式，每次返回都是同一個bean prototype 原型模式，每次都會重新生成一個新的bean例項 2. bean生命週期簡介

淺談vue生命週期

在談到Vue的生命週期的時候，我們首先需要建立一個例項，也就是在 new Vue ( ) 的物件過程當中，首先執行了init（init是vue元件裡面預設去執行的），在init的過程當中首先呼叫了beforeCreate，然後在injections（注射）和reactivity（反應性）的時候，它會

對Vue生命週期鉤子函式的理解

對Vue生命週期鉤子函式的理解例項建立之後，初始化事件和生命週期，而後觸發beforeCreate。beforeCreate，當前例項建立之前，很少操作，一般用於載入動畫，比如建立一個旋轉動畫。created表示當前例項建立完成，元件、屬性等初始化完成，一般封裝一個方法，從網路請求資料

Android之Activity生命週期簡介

概述有圖有真相，所以先上圖：上圖是從Android官網截下的Activity的生命週期流程圖，結構非常清晰，它描述了Activity在其生命週期中所有可能發生的情況以及發生的先後順序，下面就將結合此圖詳細介紹一下Activity的生命週期。 --- --- Activity四大

Vue-生命週期（鉤子函式）

參考：https://cn.vuejs.org/v2/guide/instance.html 每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給

vue生命週期筆記-version0.1

一：vue父子元件生命週期鉤子執行先後順序程式碼 : 父元件(A.vue) <template> <div> <div id="example"> <p>Original message: "{{ message }}"<

Vue 生命週期總結與思考實驗

生命週期函式就是 Vue 例項在某一個時間點自動執行的函式先上圖，一步一步講解建議邊看生命週期圖邊看最下面的步驟一步一步的走，有不理解的地方看看總結。並且在事件中多實驗。

例項化vue發生了什麼?(詳解vue生命週期)

例項化vue發生了什麼?(詳解vue生命週期) 本文將對vue的生命週期進行詳細的講解,讓你瞭解一個vue例項的誕生都經歷了什麼~ 我在Github上建立了一個存放vue筆記的倉庫,以後會陸續更新一些知識和專案中遇到的坑,有興趣的同學可以去看看哈(歡迎star)! 傳送門例項化一個Vue c

vue生命週期小記

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vu

Vue 生命週期LIFECYCLE是8個嗎？

vue生命週期鉤子個數是：11個。 export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated',

vue:生命週期

beforeCreate(){ console.log('元件例項剛剛被建立'); }, created(){ console.log('例項已經建立完成');

vue 生命週期詳解

每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。下面是生命週期圖可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式，然後我們再一一詳解: befo

【轉】Vue生命週期

Vue所有的生命週期鉤子自動繫結在this上下文到例項中，因此你可以訪問資料，對屬性和方法進行運算。這意味著你不能使用箭頭函式來定義一個生命週期方法。這是因為箭頭函式綁定了父上下文，因此this與你期待的Vue例項不同。 1、beforeCreate 　　在例項初始化之後，資料觀測和event/watch

vue生命週期簡介