vue

Vue2.0源码略读

借助一些他人笔记进行略读

Posted by Jorce on November 13, 2018

Update: 略读vue2.0源码


此篇文章记录自己在看Vue.js源码分析书籍时候的一些点。

Vue本质上还是一个function,在prototype上挂在了许多扩展的方法

注:为什么不用class而是用function?

因为在prototype上扩展方法的时候,可以在多个模块中分别维护,而class则是在一个模块中实现所有,实现多个模块维护并不方便。

new Vue之后的流程

进行一系列初始化过程>如果有el则使用$mount进行挂载

调用mountComponent方法中的vm._render生成虚拟dom之后再实例化一个watcher,再调用updateComponent 中的vm._update更新dom)

vm._isMounted为true时,可以调用mounted方法了。

  注:1)虚拟dom:浏览器中真实DOM的属性过多,create一个的成本比较高,因此引入了虚拟dom-VNode,本质上是一个原生的js对象。(Vue 借鉴了 snabbdom)VNode本身不包含操作dom的方法,所以更轻量。

vm._render.createElement :使用此方法创建一个VNode,每个都有自己的子节点又是一个VNode,模拟真实的DOM Tree

vm._update._patch:patch主要用来做不同平台dom渲染,首次渲染调用createElm ,递归创建VNode,调用原生的insert和append方法挂在到DOM Tree.

↓拿来的图: auto-focus