vue.js实现初了解

Posted 2021-01-28 leiting

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