亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

詳解vue生命周期

svtter / 633人閱讀

摘要：注意看下此時(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ì)很熟悉：

可以看到在vue一整個(gè)的生命周期中會(huì)有很多鉤子函數(shù)提供給我們?cè)趘ue生命周期不同的時(shí)刻進(jìn)行操作, 那么先列出所有的鉤子函數(shù)，然后我們?cè)僖灰辉斀?

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

先來(lái)一波代碼，各位復(fù)制在瀏覽器中運(yùn)行，打開(kāi)console查看就行了：




  
  
  
  vue生命周期學(xué)習(xí)
  


  

    
{{message}}

運(yùn)行后打開(kāi)console可以看到打印出來(lái)內(nèi)容如下:

可以看到一個(gè)vue實(shí)例在創(chuàng)建過(guò)程中調(diào)用的幾個(gè)生命周期鉤子。

1. 在beforeCreate和created鉤子函數(shù)之間的生命周期

在這個(gè)生命周期之間，進(jìn)行初始化事件，進(jìn)行數(shù)據(jù)的觀測(cè)，可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時(shí)，視圖也會(huì)改變）。
注意看下：此時(shí)還是沒(méi)有el選項(xiàng)

2. created鉤子函數(shù)和beforeMount間的生命周期

在這一階段發(fā)生的事情還是比較多的。

首先會(huì)判斷對(duì)象是否有el選項(xiàng)。如果有的話就繼續(xù)向下編譯，如果沒(méi)有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該vue實(shí)例上調(diào)用vm.$mount(el)。此時(shí)注釋掉代碼中:

el: "#app",

然后運(yùn)行可以看到到created的時(shí)候就停止了：

如果我們?cè)诤竺胬^續(xù)調(diào)用vm.$mount(el),可以發(fā)現(xiàn)代碼繼續(xù)向下執(zhí)行了

vm.$mount(el) //這個(gè)el參數(shù)就是掛在的dom接點(diǎn)

然后，我們往下看，template參數(shù)選項(xiàng)的有無(wú)對(duì)生命周期的影響。
（1）.如果vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)。
（2）.如果沒(méi)有template選項(xiàng)，則將外部HTML作為模板編譯。
（3）.可以看到template中的模板優(yōu)先級(jí)要高于outer HTML的優(yōu)先級(jí)。
修改代碼如下, 在HTML結(jié)構(gòu)中增加了一串html，在vue對(duì)象中增加了template選項(xiàng)：




  
  
  
  vue生命周期學(xué)習(xí)
  


  

    
    
{{message + "這是在outer HTML中的"}}

執(zhí)行后的結(jié)果可以看到在頁(yè)面中顯示的是：

那么將vue對(duì)象中template的選項(xiàng)注釋掉后打印如下信息：

這下就可以想想什么el的判斷要在template之前了~是因?yàn)関ue需要通過(guò)el找到對(duì)應(yīng)的outer template。

在vue對(duì)象中還有一個(gè)render函數(shù)，它是以createElement作為參數(shù)，然后做渲染操作，而且我們可以直接嵌入JSX.

new Vue({
    el: "#app",
    render: function(createElement) {
        return createElement("h1", "this is createElement")
    }
})

可以看到頁(yè)面中渲染的是：

所以綜合排名優(yōu)先級(jí)：
render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.

3. beforeMount和mounted 鉤子函數(shù)間的生命周期

可以看到此時(shí)是給vue實(shí)例對(duì)象添加$el成員，并且替換掉掛在的DOM元素。因?yàn)樵谥癱onsole中打印的結(jié)果可以看到beforeMount之前el上還是undefined。

4. mounted

注意看下面截圖：

在mounted之前h1中還是通過(guò){{message}}進(jìn)行占位的，因?yàn)榇藭r(shí)還有掛在到頁(yè)面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化。

5. beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期

當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染，先后調(diào)用beforeUpdate和updated鉤子函數(shù)。我們?cè)赾onsole中輸入：

vm.message = "觸發(fā)組件更新"

發(fā)現(xiàn)觸發(fā)了組件的更新：

6.beforeDestroy和destroyed鉤子函數(shù)間的生命周期

beforeDestroy鉤子函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroyed鉤子函數(shù)在Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

本文是個(gè)人對(duì)vue的生命周期的理解，有什么不對(duì)的地方還請(qǐng)大牛多多指點(diǎn)~

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

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

相關(guān)文章

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

    摘要：實(shí)例在文檔中經(jīng)常會(huì)使用這個(gè)變量名表示實(shí)例，在實(shí)例化時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。通俗說(shuō)就是實(shí)例從創(chuàng)建到銷毀的過(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

  • 實(shí)例化vue發(fā)生了什么?(詳解vue生命周期)

    摘要：實(shí)例化發(fā)生了什么詳解生命周期本文將對(duì)的生命周期進(jìn)行詳細(xì)的講解讓你了解一個(gè)實(shí)例的誕生都經(jīng)歷了什么我在上建立了一個(gè)存放筆記的倉(cāng)庫(kù)以后會(huì)陸續(xù)更新一些知識(shí)和項(xiàng)目中遇到的坑有興趣的同學(xué)可以去看看哈歡迎傳送門實(shí)例化一個(gè)這是一個(gè)方法觸發(fā)鉤子函數(shù)組件實(shí)例剛 實(shí)例化vue發(fā)生了什么?(詳解vue生命周期) 本文將對(duì)vue的生命周期進(jìn)行詳細(xì)的講解,讓你了解一個(gè)vue實(shí)例的誕生都經(jīng)歷了什么~ 我在Githu...

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

  • 詳解 mpvue 小程序框架 及和原生的差異

    摘要：在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，事件回調(diào)?？梢灾苯訉懙葮?biāo)簽的寫法之前會(huì)的工程師上手框架的成本較低 簡(jiǎn)介 1.美團(tuán)工程師推出的基于Vue.js封裝的用于開(kāi)發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點(diǎn)3.可完全組件化開(kāi)發(fā) 特點(diǎn) 1.組件化開(kāi)發(fā)2.完成的Vue.js開(kāi)發(fā)體驗(yàn)(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項(xiàng)目5.最終H5...

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

  • Vue的生命周期

    摘要：和下面手動(dòng)調(diào)用在控制臺(tái)中輸入在這個(gè)階段會(huì)銷毀實(shí)例，生命周期結(jié)束。外部實(shí)例中的函數(shù)顯示的效果參考鏈接組件的生命周期詳解生命周期 為什么要認(rèn)識(shí)Vue的生命周期 Vue的生命周期是一個(gè)非常重要的點(diǎn)，如果不懂Vue的生命周期，那么很多時(shí)候，就不知道Vue的實(shí)際渲染時(shí)機(jī)，程序中會(huì)出現(xiàn)各種bug。 因此，學(xué)習(xí)Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

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

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

0條評(píng)論

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