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

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

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

簡單的來說一下vue的生命周期函數(shù)

beforeCreate // el 和 data 并未初始化

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

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

mounted // 完成了真實el和data初始化

beforeUpdate

updated

beforeDestroy

destroyed

對比下create和mounted

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

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

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

總結

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

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

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

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

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

vue.js簡介和生命周期

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

wizChen 2019-08-26 12:02 評論0 收藏0
再談Vue的生命周期----結合Vue源碼

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

KavenFan 2019-08-23 12:16 評論0 收藏0
Vue組件定義

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

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

摘要：在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)。可以直接寫等標簽的寫法之前會的工程師上手框架的成本較低簡介 1.美團工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點3.可完全組件化開發(fā) 特點 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構建項目5.最終H5...

IamDLY 2019-08-26 13:52 評論0 收藏0
Vue 實例中的生命周期鉤子詳解

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

gityuan 2019-08-20 15:16 評論0 收藏0