vue.js簡介和生命周期

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

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

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

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

中間的監(jiān)控著負責監(jiān)控兩側的數(shù)據，相對應的實現(xiàn)數(shù)據互通，不需要手動的去操作DOM.
Vue.js的兩大核心：數(shù)據驅動和組件化

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


        
        {{name}}
 


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

銷毀之前，修改name的值，可以成功修改視圖顯示，一旦調用實例$destroy()方法之后，實例與視圖的關系解綁，在修改name的值，視圖也不會在更新了，說明實例已經被銷毀了。

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

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

轉載請注明本文地址：http://systransis.cn/yun/108066.html

再談Vue的生命周期----結合Vue源碼

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

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

摘要：在這一步，實例已完成以下的配置數(shù)據觀測，屬性和方法的運算，事件回調?？梢灾苯訉懙葮撕灥膶懛ㄖ皶墓こ處熒鲜挚蚣艿某杀据^低簡介 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.js基礎教程

摘要：自定義名稱縮放控制器可以使用中的動畫設計更為華麗的效果。在和中必須使用，不然它們會同時生效，動畫也會瞬間完成。先在標簽內加入，接著類似自定義動畫可以給命名。文章鏈接：Vue.js基礎教程開發(fā)工具準備：根據個人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode；安裝git base和node.js；安裝vue-cli，命令npm i -g @vue/...

XboxYan 2019-08-23 15:24 評論0 收藏0
vue 源碼學習（一）目錄結構和構建過程簡介

摘要：框架使用了作為類型檢查，來保證項目的可讀性和維護性。的主目錄下有的配置文件，還有目錄，指定了各種自定義類型。表示構建出來的文件遵循規(guī)范。 Flow vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。在學習源碼前可以先看下Flow的語法官方文檔目錄結構 vue....

lavnFan 2019-08-23 14:36 評論0 收藏0
Vue 實例中的生命周期鉤子詳解

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

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