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能夠進行配置，配置多文件入口，進行多頁面開發

 

渲染流程大概分如下幾個步驟：

1. new Vue，執行初始化
2. 掛載$mount方法，經過自定義Render方法、template、el等生成Render函數
3. 經過Watcher監聽數據的變化
4. 當數據發生變化時，Render函數執行生成VNode對象
5. 經過patch方法，對比新舊VNode對象，經過DOM Diff算法，添加、修改、刪除真正的DOM元素

下面說一說vue的渲染模式有三種：

一、自定義的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.})

　　

二、 template寫法

1.var vm = new Vue({
2.    data: {
3.        // 以一個空值聲明 `msg`
4.        msg: ''
5.    },
6.    template: '<div>{{msg}}</div>'
7.})

　　

三、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（銷燬後）