生命週期(vue)

時間 2019-11-11

標籤生命週期 vue 简体版

原文原文鏈接

　　代碼和人同樣都是有本身的週期的,只有好好的瞭解代碼的週期才能夠更好的完成項目開發,今天咱們來說講vue中提到的"生命週期"和"生命週期鉤子".html

第一步咱們來了解一下她倆的含義vue

　　a.生命週期:vue實例從建立到銷燬過程當中發生的一系列的狀態api

　　b.生命週期鉤子:鉤子的做用是提供給用戶在不一樣階段添加本身的代碼的機會app

第二步咱們來看看vue官網中關於"生命週期鉤子"的選項有哪些?以下圖(官網:https://cn.vuejs.org/v2/api/#beforeCreate)dom

第三步咱們來了解並解釋一下官網的生命週期流程圖.如圖(https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)ide

　　a.初始化vue實例函數

　　b.初始化事件和讀取生命週期函數ui

　　c.beforeCreate()....這個時候你什麼都獲取不了,數據和dom也操做不了this

　　d.讀取data,computed,watch,methods....以及屬性的監聽,數據觀測(data observer),屬性和方法的運算等spa

　　e.created().....這個時候就能夠操做屬性和方法了

　　f.判斷是否有el配置項,若是沒有就判斷是否執行了$mont()(註釋:$mount("#app")叫動態掛載,等價於配置項中的el:#app),若二者都沒有的話就再也不往下執行了

　　g.判斷是否有template,若是有,就將template渲染到el上,沒有就執行render

　　h.beforeMount()...這個時候尚未獲取到dom,不能夠操做dom

　　i.mounted()...這個時候你就能夠操做dom了(操做dom結構的方式不建議使用document,採用ref)

　　數據發生變化後

　　　dom更新的流程

　　j.beforeUpdate()....數據以經更新可是dom沒有從新渲染,若是獲取頁面中的數據仍是原來的值

　　k.updated()....數據和dom以及更新,打補丁完成(這個時候就能夠從新計算滾動條的長度,輪播圖中的頁面數量等)

　　銷燬

　　l.beforeDestroy()

　　m.Vue 實例指示的全部東西都會解綁,全部的事件監聽會被移出,全部的子實例也會被銷燬.

　　n.destroyed()

　　附錄,vue.js須要本身去官網下載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div id="app">


        <!--  在vue的做用範圍內的標籤的惟一標識符  -->
        <p ref="p1">{{message}}</p>
        <p ref="p2">{{message}}</p>
        <p ref="p3">{{message}}</p>
        <p ref="p4">{{message}}</p>
        <p ref="p5">{{title}}</p>

        <p><input type="text" v-model="message"></p>
        <button @click="print()">按鈕</button>

        <div class="box" v-if="isShow"></div>

    </div>


    <div id="app2">

        <p>{{message}}</p>
        <p><input type="text" v-model="message"></p>
        <button @click="print()">按鈕</button>

    </div>

    <script src="vue.js"></script>

    <script>
    // 生命週期：vue實例從建立到銷燬發生的一系列的狀態
    // 生命週期鉤子:鉤子的做用給用戶在不一樣階段添加本身的代碼的機會。
    // 建立
    var vm = new Vue({
        // el: '#app',
        data: {
            message: 'hello vue',
            title: '',
            isShow: true
        },
        methods: {
            print(){
                console.log(this.message);
            }
        },

        // 生命週期鉤子/生命週期函數/鉤子函數
        beforeCreate(){
            console.log('beforeCreate--------------------------------');
            //無效：
            // console.log(this.message);
            // this.print();
        },
        created(){
            console.log('created--------------------------------');
            //可使用屬性和方法等了
            // console.log(this.message);
            // this.print();

        },
        beforeMount(){
            console.log('beforeMount--------------------------------');
            console.log(document.querySelector('p').innerText);

            console.log(this.$refs);

        },
        mounted(){
            console.log('mounted--------------------------------');
            console.log(document.querySelector('p').innerText);

            console.log(this.$refs);
            console.log(this.$refs.p1.innerText);

        },
        beforeUpdate(){
            console.log('beforeUpdate--------------------------------');
            console.log(this.message);
            console.log(this.$refs.p1.innerText);
        },
        updated(){
            console.log('updated--------------------------------');
            console.log(this.message);
            console.log(this.$refs.p1.innerText);
        },
        beforeDestroy(){
            console.log('beforeDestroy--------------------------------');
        },
        destroyed(){
            console.log('destroyed');
        },
        //捕獲子組件的異常
        // errorCaptured(){
        //     console.log('errorCaptured');
        // }
    })

相關標籤/搜索

每日一句

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