vue生命周期簡(jiǎn)介和鉤子函數(shù)

wzyplus 發(fā)布于2019-08-23 17:01 / 914人閱讀

摘要：簡(jiǎn)單的來(lái)說(shuō)一下的生命周期函數(shù)和并未初始化完成了數(shù)據(jù)的初始化，沒有完成了虛擬和初始化完成了真實(shí)和初始化對(duì)比下和在模板渲染成前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

簡(jiǎn)單的來(lái)說(shuō)一下vue的生命周期函數(shù)

beforeCreate // el 和 data 并未初始化

created // 完成了data數(shù)據(jù)的初始化，el沒有

beforeMount // 完成了虛擬el和data初始化

mounted // 完成了真實(shí)el和data初始化

beforeUpdate

updated

beforeDestroy

destroyed

對(duì)比下create和mounted

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

其實(shí)兩者比較好理解，通常created使用的次數(shù)多，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會(huì)有這一步，而如果你寫入組件中，你會(huì)發(fā)現(xiàn)在created中無(wú)法對(duì)chart進(jìn)行一些初始化配置，一定要等這個(gè)html渲染完后才可以進(jìn)行，那么mounted就是不二之選

總結(jié)

我們經(jīng)常使用的地方

beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件 
created ：在這結(jié)束loading，在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
mounted ： 如果需要獲取dom的可以在這里操作

云服務(wù)器 GPU云服務(wù)器生命周期軟件生命周期生命周期理論頁(yè)面生命周期

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

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

相關(guān)文章

vue.js簡(jiǎn)介和生命周期

摘要：五當(dāng)修改實(shí)例的時(shí)，就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過程中，提供的鉤子函數(shù)，在檢測(cè)我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子函數(shù)。本文詳情:http://www.zymseo.com/vue/1、Vue.js框架是什么，為什么學(xué)習(xí)它？世界上最好的MVVM框架： MVVM可以拆分成：View --- ViewModel --- Model三部分 showImg(https...

wizChen 2019-08-26 12:02 評(píng)論0 收藏0
再談Vue的生命周期----結(jié)合Vue源碼

摘要：中的生命周期函數(shù)也可以稱之為生命周期鉤子函數(shù)，在特定的時(shí)期，調(diào)用特定的函數(shù)。吊起鉤子函數(shù)調(diào)起鉤子函數(shù)問題為什么是一個(gè)數(shù)組卸載組件，會(huì)觸發(fā)一個(gè)這行代碼之后發(fā)生了什么背后實(shí)現(xiàn)原理。簡(jiǎn)介關(guān)于Vue的生命周期函數(shù)，目前網(wǎng)上有許多介紹文章，但也都只是分析了表象。這篇文檔，將結(jié)合Vue源碼分析，為什么會(huì)有這樣的表象。 Vue中的生命周期函數(shù)也可以稱之為生命周期鉤子（hook）函數(shù)，在特定的時(shí)期...

KavenFan 2019-08-23 12:16 評(píng)論0 收藏0
Vue組件定義

摘要：組件結(jié)構(gòu)基礎(chǔ)知識(shí)屬性屬性維護(hù)一個(gè)組件內(nèi)部狀態(tài)，其余組件正常情況下不可見。方案選擇單文件一行的簡(jiǎn)單結(jié)構(gòu)常規(guī)的選擇前邊兩種方案解決不了時(shí)候的選擇靈活性高注意不論選擇哪一種方案，定義模板時(shí)，一定要有一個(gè)非標(biāo)簽元素作根，有且僅有一個(gè)。簡(jiǎn)介組件是可復(fù)用的 Vue 實(shí)例。本質(zhì)上是一個(gè)對(duì)象，該對(duì)象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬...

imtianx 2019-08-23 10:41 評(píng)論0 收藏0
詳解 mpvue 小程序框架及和原生的差異

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

IamDLY 2019-08-26 13:52 評(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)建到銷毀的過程，就是生命周期。 Vue 實(shí)例中的生命周期鉤子 Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁(yè)面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程...

gityuan 2019-08-20 15:16 評(píng)論0 收藏0