成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

NikoManiac / 1005人閱讀

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

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

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

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

上代碼

自己粘走執(zhí)行



    
    





     
{{ message }}

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

由上圖知:

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

如下圖

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

由圖知:

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

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

生命周期鉤子函數(shù)使用 
beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件 
created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行 
mounted ： 在這發(fā)起后端請求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認(rèn)刪除XX嗎？ destoryed ：當(dāng)前組件已被刪除，清空相關(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://m.hztianpu.com/yun/83352.html

相關(guān)文章

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

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

    DrizzleX 評論0 收藏0

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

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

    gityuan 評論0 收藏0

  • 詳解vue生命周期

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

    svtter 評論0 收藏0

  • vue面試

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

    vspiders 評論0 收藏0

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

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

    scola666 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<