国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 2.0 淺談--生命周期和鉤子函數(shù)

NikoManiac / 951人閱讀

摘要：前言用也有一段時間了發(fā)現(xiàn)生命周期是很重要的一部分稍微懂得了一些東西特地來分享一下生命周期和鉤子函數(shù)介紹啥也不說先上圖圖為生命周期圖圖為生命周期圖圖為和鉤子函數(shù)比較重點看生命周期和鉤子函數(shù)具體上代碼自己粘走執(zhí)行創(chuàng)建前狀態(tài)創(chuàng)建完畢狀態(tài)

前言 
用Vue也有一段時間了,發(fā)現(xiàn)生命周期是很重要的一部分,稍微懂得了一些東西,特地來分享一下.
生命周期和鉤子函數(shù)-介紹

啥也不說先上圖
圖-1為 Vue 1.0 生命周期圖,圖-2為 Vue 2.0 生命周期圖,圖-3為Vue 1.0 和 Vue 2.0 鉤子函數(shù)比較
重點看 Vue 2.0

生命周期和鉤子函數(shù)-具體

上代碼

自己粘走執(zhí)行



    
    





     
{{ message }}

打開F12可以查看生命周期各個時期的鉤子函數(shù)的狀態(tài),如下圖

由上圖知:

1.beforeCrete: 此時,$el和data都為undefined,沒有初始化
2.created:  創(chuàng)建后data初始化了,而$el沒有
3.brforeMount: 掛在之前,$el和data都初始化了
4.mounted: Vue實例掛載完成了
注意: beforeMount紅色矩形框里是{{message}},mounted的紅矩形框里是xuxiao is boy,說明掛載前$el的值為"虛擬"的元素節(jié)點,掛載后"虛擬"的Dom節(jié)點被真實的Dom節(jié)點替換
數(shù)據(jù)更新(update) 
在控制臺里輸入app.message = "數(shù)據(jù)更新"后

如下圖

由此可見,當data數(shù)據(jù)變化時只會觸發(fā)update
Vue實例解耦(destroy) 
在控制臺里輸入app.$destroy();
如下圖

由圖知:

執(zhí)行完destroy操作后,data里的數(shù)據(jù)沒有變化,但是Dom結(jié)構(gòu)還存在,也就是Vue實例不再受控制了,完成了解耦
生命周期和鉤子函數(shù)-總結(jié)

如下圖
這是把官方 Vue 2.0 生命周期的圖例簡化后的

生命周期鉤子函數(shù)使用 
beforecreate : 舉個栗子：可以在這加個loading事件 
created ：在這結(jié)束loading，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行 
mounted ： 在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關(guān)內(nèi)容
最后的寄語

第一次在segmentfault寫東西,寫的不對的地方請多多見諒,也請幫我指正出來!

參考文章 
https://segmentfault.com/a/11...
http://www.cnblogs.com/gagag/...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83352.html

相關(guān)文章

  • 淺談MVC,MVP,MVVM漸進變化及React與Vue比較

    摘要：將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。此示例使用類似的語法，稱為。執(zhí)行更快，因為它在編譯為代碼后進行了優(yōu)化。基于的模板使得將已有的應(yīng)用逐步遷移到更為容易。 前言 因為沒有明確的界定,這里不討論正確與否,只表達個人對前端MV*架構(gòu)模式理解看法,再比較React和Vue兩種框架不同.寫完之后我知道這文章好水,特別是框架對比部分都是別人說爛的,而我也是打算把...

    DrizzleX 評論0 收藏0

  • Vue 實例中的生命周期鉤子詳解

    摘要：實例在文檔中經(jīng)常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...

    gityuan 評論0 收藏0

  • 詳解vue生命周期

    摘要：注意看下此時還是沒有選項鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。 首先，每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉： showImg(https://segmentfau...

    svtter 評論0 收藏0

  • vue面試

    摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁面的修改。 談?wù)勀銓VVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負責(zé)數(shù)據(jù)的展示；...

    vspiders 評論0 收藏0

  • vue入門筆記體系（二）vue生命周期

    摘要：此時還未有選項鉤子函數(shù)和間的生命周期完成后，會有一個判斷過程，判斷對象是否有選項。鉤子函數(shù)和鉤子函數(shù)間的生命周期當發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。和鉤子函數(shù)間的生命周期鉤子函數(shù)在實例銷毀之前調(diào)用。 vue生命周期 這是vue生命周期的圖示具體內(nèi)容：showImg(https://segmentfault.com/img/bV4xju?w=1200&...

    scola666 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<