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

wizChen 發(fā)布于2019-08-26 12:02 / 1296人閱讀

摘要：五當(dāng)修改實(shí)例的時(shí)，就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過(guò)程中，提供的鉤子函數(shù)，在檢測(cè)我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子函數(shù)。

本文詳情:http://www.zymseo.com/vue/
1、Vue.js框架是什么，為什么學(xué)習(xí)它？
世界上最好的MVVM框架：

MVVM可以拆分成：View --- ViewModel --- Model三部分

中間的監(jiān)控著負(fù)責(zé)監(jiān)控兩側(cè)的數(shù)據(jù)，相對(duì)應(yīng)的實(shí)現(xiàn)數(shù)據(jù)互通，不需要手動(dòng)的去操作DOM.
Vue.js的兩大核心：數(shù)據(jù)驅(qū)動(dòng)和組件化

2.最簡(jiǎn)單的數(shù)據(jù)雙向綁定


        
        {{name}}
 


watch是一個(gè)json，每一個(gè)json的鍵名就是監(jiān)測(cè)的data中的數(shù)據(jù)，鍵值是一個(gè)function，第一個(gè)參數(shù)是新數(shù)據(jù)，第二個(gè)參數(shù)是舊數(shù)據(jù)。
4.VueJs實(shí)例的生命周期
一.beforeCreate
此階段為實(shí)例初始化，此時(shí)的數(shù)據(jù)觀察個(gè)時(shí)間配置都沒(méi)準(zhǔn)備好，實(shí)例中的data和el還是undefined
二、created
beforeCreate之后緊接著的鉤子韓式就是created,此時(shí)我們可以讀取到data的值，但是DOM還沒(méi)有生成，多以el屬性還不存在，$data為一個(gè)object對(duì)象，而$el的值為underfined
三、beforeMount
此階段即將掛載，DOM生成，$el成功獲取關(guān)聯(lián)到節(jié)點(diǎn)，但是{{name}}還沒(méi)有成功的被渲染出來(lái)達(dá)成我們data里面的數(shù)據(jù)
四、mounted
mounted也就是掛載完畢階段，此時(shí)數(shù)據(jù)會(huì)被成功的渲染出來(lái)，我們編寫這個(gè)鉤子，{{name}}被成功的渲染出來(lái)。
五、beforeUpdate
當(dāng)修改vue實(shí)例的data時(shí)，vue就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過(guò)程中，vue提供beforeUpdata的鉤子函數(shù)，在檢測(cè)我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子函數(shù)beforeUpdate。
此時(shí)我們 即將更新 data里面的數(shù)據(jù)，但是并未更新成功
六、updated
此時(shí)  我們data的數(shù)據(jù)已經(jīng)更新完畢 
七、beforeDestroy
調(diào)用$destriy()方法可以銷毀當(dāng)前組件，在銷毀前，會(huì)觸發(fā)beforeDestroy鉤子
八、destroyed

銷毀之前，修改name的值，可以成功修改視圖顯示，一旦調(diào)用實(shí)例$destroy()方法之后，實(shí)例與視圖的關(guān)系解綁，在修改name的值，視圖也不會(huì)在更新了，說(shuō)明實(shí)例已經(jīng)被銷毀了。