欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue生命周期詳解

 更新時間:2023年04月13日 11:56:45   作者:IsLuNaTiC  
這篇文章詳細介紹了Vue的生命周期,文中通過代碼示例介紹的非常詳細。對大家的學(xué)習(xí)有一定的參考借鑒價值,需要的朋友可以參考下

1、定義

生命周期函數(shù)(俗稱:鉤子函數(shù))

根據(jù)vue整個渲染機制,在渲染的每個關(guān)鍵點上,提供對應(yīng)的函數(shù),進行一些相關(guān)的業(yè)務(wù)操作。

2、四個階段

初始階段:beforeCreate():可以加loading效果、

created():結(jié)束loading效果,發(fā)請求,獲取數(shù)據(jù),添加定時器;

①創(chuàng)建Vue實例、②初始化事件對象和生命周期、③調(diào)用beforeCreate()鉤子函數(shù)(無法訪問data)

④初始化數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測、⑤調(diào)用created()鉤子函數(shù)(可以訪問打他對象屬性)

⑥編譯模板語句生成虛擬DOM

掛載階段:beforeMount()、mounted();

 ①調(diào)用beforeMount()鉤子函數(shù),(真實DOM未生成),②給vm追加$el屬性,用它來代替"$el","¥el"代表了真是的DOM元素(真實DOM生成,頁面渲染完成)③調(diào)用mounted()鉤子函數(shù)(可以操作DOM元素)。

更新階段:beforeUpdate()、updated();

①data發(fā)生變化,②調(diào)用beforeUpdate()鉤子函數(shù)(數(shù)組發(fā)生變化,頁面未更新)(手動移除事件監(jiān)聽器)、③虛擬DOM重新渲染和修補、④調(diào)用updated鉤子函數(shù)(頁面已更新)(可以對數(shù)據(jù)做統(tǒng)一處理)

銷毀階段:beforeDestroy()、destroyed()。

①調(diào)用 this.$destroy()方法、②調(diào)用beforeDestroy()鉤子函數(shù)(做銷毀前的準(zhǔn)備工作)、③卸載子組件和監(jiān)聽器、解綁自定義事件監(jiān)聽器、④調(diào)用destroyed()鉤子函數(shù)(所有的東西已經(jīng)解綁)

    <div class="vues">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
        <button @click="add">點我加1</button>
        <button @click="destroy">點擊銷毀</button>
    </div>
    <script>
        new Vue({
            el: ".vues",
            data: {
                msg: '生命周期',
                count: 0
            },
            methods: {
                add: function () {
                    this.count++
                },
                destroy() {
                    this.$destroy()
                }
            },
            /*
                1、初始階段
                    el有,template也有,最終編譯template模板語句
                    el有,template沒有,最終編譯el模板語句
                    el沒有的時候,需要手動調(diào)用vm.$mount(el) 進行手動掛載,然后流程才能繼續(xù),                                
                    此時如果template有,最終編譯template模板語句
                    el沒有的時候,需要手動調(diào)用vm.$mount(el) 進行手動掛載,然后流程才能繼續(xù),v 
                    此時如果template沒有,最終編譯el模板語句
                結(jié)論:流程想要控制:el必須存在
                el和template同時存在,優(yōu)先選擇template,如果沒有template才選擇el    
            */
            beforeCreate() {
                // 創(chuàng)建前:數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測的創(chuàng)建前
                // 此時還無法訪問data當(dāng)中的數(shù)據(jù),包括methods也是無法訪問的。
                console.log("beforeCreate");
            },
            created() {
                // 創(chuàng)建后:表示數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測創(chuàng)建完畢,可以訪問data中的數(shù)據(jù)了。
                // 可以訪問methods
                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>

到此這篇關(guān)于Vue生命周期詳解的文章就介紹到這了,更多相關(guān)Vue生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解在vue-cli中使用graphql即vue-apollo的用法

    詳解在vue-cli中使用graphql即vue-apollo的用法

    這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)

    使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)

    最近接到一個需求是做一個中國地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線中國地圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • vue init失敗簡單解決方法(終極版)

    vue init失敗簡單解決方法(終極版)

    這篇文章主要介紹了vue init失敗的簡單解決方法-終極版,需要的朋友可以參考下
    2017-12-12
  • vue 解決循環(huán)引用組件報錯的問題

    vue 解決循環(huán)引用組件報錯的問題

    今天小編就為大家分享一篇vue 解決循環(huán)引用組件報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue實現(xiàn)tab路由切換組件的方法實例

    vue實現(xiàn)tab路由切換組件的方法實例

    這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)tab路由切換組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • Vue引入并使用Element組件庫的兩種方式小結(jié)

    Vue引入并使用Element組件庫的兩種方式小結(jié)

    本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • vue開發(fā)之moment的介紹與使用

    vue開發(fā)之moment的介紹與使用

    moment是一款多語言支持的日期處理類庫, 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • 在vue項目中引入高德地圖及其UI組件的方法

    在vue項目中引入高德地圖及其UI組件的方法

    今天小編就為大家分享一篇在vue項目中引入高德地圖及其UI組件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue項目實現(xiàn)簡單的權(quán)限控制管理功能

    Vue項目實現(xiàn)簡單的權(quán)限控制管理功能

    這篇文章主要介紹了Vue項目實現(xiàn)簡單的權(quán)限控制功能,文中給大家介紹了兩種方式進行權(quán)限限制,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2019-07-07
  • Vue項目新一代狀態(tài)管理工具Pinia的使用教程

    Vue項目新一代狀態(tài)管理工具Pinia的使用教程

    pinia是一個輕量級的狀態(tài)管理庫,屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關(guān)于Vue項目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下
    2022-11-11

最新評論