Vue.js2.x源码初步阅览

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

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

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

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

2.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.

↓拿来的图:

暂时先写到这

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值