vue生命週期

時間 2020-07-10

標籤 vue 生命週期简体版

原文原文鏈接

1、vue生命週期的8個階段css

生命週期鉤子	組件狀態	最佳實踐
beforeCreate	實例初始化以後，this指向建立的實例，不能訪問到data、computed、watch、methods上的方法和數據	經常使用於初始化非響應式變量
created	實例建立完成，可訪問data、computed、watch、methods上的方法和數據，未掛載到DOM，不能訪問到$el屬性，$ref屬性內容爲空數組	經常使用於簡單的ajax請求，頁面的初始化
beforeMount	在掛載開始以前被調用，beforeMount以前，會找到對應的template，並編譯成render函數	-
mounted	實例掛載到DOM上，此時能夠經過DOM API獲取到DOM節點，$ref屬性能夠訪問	經常使用於獲取VNode信息和操做，ajax請求
beforeupdate	響應式數據更新時調用，發生在虛擬DOM打補丁以前	適合在更新以前訪問現有的DOM，好比手動移除已添加的事件監聽器
updated	虛擬 DOM 從新渲染和打補丁以後調用，組件DOM已經更新，可執行依賴於DOM的操做	避免在這個鉤子函數中操做數據，可能陷入死循環
beforeDestroy	實例銷燬以前調用。這一步，實例仍然徹底可用，this仍能獲取到實例	經常使用於銷燬定時器、解綁全局事件、銷燬插件對象等操做
destroyed	實例銷燬後調用，調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬	-

beforeCreate：html

在new一個vue實例後，只有一些默認的生命週期鉤子和默認事件，其餘的東西都還沒建立。在beforeCreate生命週期執行的時候，data和methods中的數據都尚未初始化。不能在這個階段使用data中的數據和methods中的方法
created：vue

data 和 methods都已經被初始化好了，若是要調用 methods 中的方法，或者操做（計算、轉換） data 中的數據，最先能夠在這個階段中操做ajax

//在created以後，beforeMount以前，就要判斷是否有el選項，若是有el選項就判斷是否有template選項，若是有，開始將data中的數據和vue中的模本編譯成HTML文檔數組

beforeMount：app

執行到這個鉤子的時候，在內存中已經編譯好了模板了，可是尚未掛載到頁面中，此時，頁面仍是舊的
mounted：dom

執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了建立階段，進入到了運行階段。若是咱們想要經過插件操做頁面上的DOM節點，最先能夠在這個階段中進行函數

注意，該函數在vue的生命週期中只會執行一次，若是頁面中數據變化，會執行update函數來更新數據
beforeUpdate： 學習

當執行這個鉤子時，頁面中的顯示的數據仍是舊的，data中的數據是更新後的，頁面尚未和最新的數據保持同步
updated：ui

頁面顯示的數據和data中的數據已經保持同步了，都是最新的
beforeDestory：

Vue實例從運行階段進入到了銷燬階段，這個時候上全部的 data 和 methods ，指令，過濾器 ……都是處於可用狀態。尚未真正被銷燬
destroyed：

這個時候上全部的 data 和 methods ，指令，過濾器 ……都是處於不可用狀態。組件已經被銷燬了。

2、生命週期函數

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue生命週期學習</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <input v-model="message"></input>
            <h1>{{message1}}</h1>
        </div>
    </body>
    <script>
        var vm = new Vue({/*建立vue對象*/ el: '#app',/****掛載目標****/ data: {/****數據對象****/ message: 'Hello World!' }, computed:{/****實現某一屬性的實時計算****/ message1:function(){ return this.message.split("").reverse().join(""); } }, watched:{/****檢測某一屬性值的變化****/ }, methods:{/****組件內部的方法****/ },  beforeCreate: function() { console.group('------beforeCreate建立前狀態------'); console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)//undefined
 }, /** * 1.在beforeCreate和created鉤子之間，程序開始監控Data對象數據的變化及vue內部的初始化事件 * * */ created: function() { console.group('------created建立完畢狀態------'); console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
 }, /** * 2.在created和beforeMount之間，判斷是否有el選項，如有則繼續編譯，無，則暫停生命週期； * 若是有el選項，程序會判斷是否有templete參數選項，如有，則將其做爲模板編譯成render函數。若無，則將外部html做爲模板編譯（template優先級比外部html高 * */ beforeMount: function() { console.group('------beforeMount掛載前狀態------'); console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
 }, /** * 3.在beforeMount和mounted之間，程序將上一步編輯好的html內容替換el屬性指向的dom對象或者選擇權對應的html標籤裏面的內容 * * */ mounted: function() { console.group('------mounted 掛載結束狀態------'); console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
 }, /** * 4.mounted和beforeUpdate之間，程序實時監控數據變化 * * */ beforeUpdate: function() { console.group('beforeUpdate 更新前狀態===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, /** * 5.beforeUpdate和updated之間，實時更新dom * * */ updated: function() { console.group('updated 更新完成狀態===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, beforeDestroy: function() { console.group('beforeDestroy 銷燬前狀態===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, /** * 6.實例銷燬 * * */ destroyed: function() { console.group('destroyed 銷燬完成狀態===============》'); console.log("%c%s", "color:red", "el     : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) } }) </script>

</html>
 原文：https://blog.csdn.net/yana_li/article/details/78780335

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。