1. 程式人生 > >vue.js實現初瞭解(一)

vue.js實現初瞭解(一)

1. vue 2.0是用Flow做靜態型別檢查, 3.0對TypeScript的支援更好了;

2. vue.js是基於Rollup(更輕量,適合js庫的構建)構建的,它的構建相關配置都在scripts目錄下;

3. Runtime Only 版本(template模板編譯為render函式) 和 Runtime+Compiler 版本;

4. vue實際是一個函式,利用函式來實現類,類上掛了很多的原型方法($set,$route等是原型方法),全域性方法Vue上掛載一些靜態方法,全域性use,mixin,extend,assgtRegisters(components等)這些方法是靜態方法/屬性。

資料驅動  資料變化來驅動檢視變化

5. new Vue發生了什麼?

Vue方法原始碼片段

function Vue(options){  // 傳入options配置項
   if(process.env.NODE_ENV!=='production'&&!(this instanceof Vue)) 
  {
    warn('vue is a constructor and shou be called with `new` keyword')
   }  
   this._init(options) // 呼叫初始化方法
}

new關鍵字在js中代表例項化一個物件,而Vue實際上是一個類,類在js中是用Function來實現的,初始化會呼叫this._init方法。

Vue初始化主要乾了幾件事,合併配置,初始化生命週期,初始化事件中心,初始化渲染,初始化data、props、computed、whatcher等等,在初始化的最後,如果有el屬性,則呼叫vm.$mount方法掛載vm,掛載的目標就是把模板渲染成最終的DOM。

6. 手寫render函式

import Vue from 'vue'

var app = new Vue({
el:'#app',
render(createElement){
    return createElement('div', {
       attrs: {
         id:'#app'
       }
    }, 
this.message) }, data(){ return { message: 'Hello World~' } } })

7. Virturl DOM

是用一個原生的js物件去描述一個DOM節點,所以它比建立一個dom的代價小很多。在vue.js中,virtual DOM是用vNode這麼一個Class去描述,它是定義在src/core/vdom/vnode.js中。

8. createElement 利用 createElement 建立vNode