這篇文章主要對vue的理解進行總結: 參考來源:http://blog.csdn.net/generon/article/details/72482844 vue.js是一套構建用戶界面的漸進式框架,它的核心庫只關註視圖層。它相比之其它的框架來說要更加的輕便,易於上手,相對與大部分的框架在性能方面要 ...
這篇文章主要對vue的理解進行總結:
參考來源:http://blog.csdn.net/generon/article/details/72482844
vue.js是一套構建用戶界面的漸進式框架,它的核心庫只關註視圖層。它相比之其它的框架來說要更加的輕便,易於上手,相對與大部分的框架在性能方面要好一些。
不過也有不足的地方:比如不能支持IE8及以下的IE版本。
Vue.js的特性如下:
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
Vue目前的的開發模式主要有兩種:
1.直接頁面級的開發,script直接引入Vue
2.工程性開發,webpack+loader或者直接使用腳手架工具Vue-cli,裡面的文件都配置好了
webpack可以進行配置,配置多文件入口,進行多頁面開發
渲染流程大概分以下幾個步驟:
- new Vue,執行初始化
- 掛載
$mount
方法,通過自定義Render方法、template、el等生成Render函數 - 通過Watcher監聽數據的變化
- 當數據發生變化時,Render函數執行生成VNode對象
- 通過patch方法,對比新舊VNode對象,通過DOM Diff演算法,添加、修改、刪除真正的DOM元素
下麵說一說vue的渲染模式有三種:
1、自定義的render函數
1.Vue.component('anchored-heading', { 2. render: function (createElement) { 3. return createElement( 4. 'h' + this.level, // tag name 標簽名稱 5. this.$slots.default // 子組件中的陣列 6. ) 7. }, 8. props: { 9. level: { 10. type: Number, 11. required: true 12. } 13. } 14.})
2、 template寫法
1.var vm = new Vue({ 2. data: { 3. // 以一個空值聲明 `msg` 4. msg: '' 5. }, 6. template: '<div>{{msg}}</div>' 7.})
3、el寫法
1.var app = new Vue({ 2. el: '#app', 3. data: { 4. message: 'Hello Vue!' 5. } 6.})
這三種渲染模式最終都是要得到Render函數。只不過用戶自定義的Render函數省去了程式分析的過程,等同於處理過的Render函數,而普通的template或者el只是字元串,需要解析成AST,再將AST轉化為Render函數。
記住一點,無論哪種方法,都要得到Render函數。
我們在使用過程中具體要使用哪種調用方式,要根據具體的需求來。
-
如果是比較簡單的邏輯,使用template和el比較好,因為這兩種都屬於聲明式渲染,對用戶理解比較容易,但靈活性比較差,因為最終生成的Render函數是由程式通過AST解析優化得到的;
-
而使用自定義Render函數相當於人已經將邏輯翻譯給程式,能夠勝任複雜的邏輯,靈活性高,但對於用戶的理解相對差點。
生命周期:
beforeCreate(創建前)
created(創建後)
beforeMount(載入前)
mounted(載入後)
beforeUpdate(更新前)
updated(更新後)
beforeDestroy(銷毀前)
destroyed(銷毀後)