成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

NikoManiac / 957人閱讀

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

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

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

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

上代碼

自己粘走執(zhí)行



    
    





     
{{ message }}

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

由上圖知:

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

如下圖

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

由圖知:

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

如下圖
這是把官方 Vue 2.0 生命周期的圖例簡(jiǎn)化后的

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

第一次在segmentfault寫(xiě)東西,寫(xiě)的不對(duì)的地方請(qǐng)多多見(jiàn)諒,也請(qǐng)幫我指正出來(lái)!

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83352.html

相關(guān)文章

  • 淺談MVC,MVP,MVVM漸進(jìn)變化及React與Vue比較

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

    DrizzleX 評(píng)論0 收藏0

  • Vue 實(shí)例中的生命周期鉤子詳解

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

    gityuan 評(píng)論0 收藏0

  • 詳解vue生命周期

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

    svtter 評(píng)論0 收藏0

  • vue面試

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

    vspiders 評(píng)論0 收藏0

  • vue入門(mén)筆記體系（二）vue生命周期

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

    scola666 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<