![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue源码分析
文章平均质量分 71
web喵喵
你总是这样轻言放弃的话 无论多久都只会原地踏步
展开
-
Vue源码之import Vue发生了什么(一)
在使用vue之前,通常会import Vue from ''vue'那分析源码的第一步,看看import Vue这个过程到底发生了什么。1. 首先,将vue源码从github中clone下来。然后在vue/src中查看源码,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,对应的源码路径是src/platforms/entry-runtime-with...原创 2018-07-02 15:07:08 · 2546 阅读 · 0 评论 -
Vue源码之new Vue(二)
在一个简单的vue工程中,import Vue之后,我们会新建一个Vue实例,例如vue.js官网中的例子:那么在new Vue的过程中到底发生了什么?1. 首先,在vue源码中'src/instance/index.js'中可以看到,new Vue的过程主要是执行_init()函数。这里的_init()函数来自于'./init.js'中,在这个文件中,可以看到_init函数的主要功能:首先是对一...原创 2018-07-02 16:43:36 · 4007 阅读 · 0 评论 -
Vue源码之$mount实现数据挂载(三)
在vue实例中,通过$mount()实现实例的挂载,下面来分析一下$mount()函数都实现了什么功能。在'src/platforms/web/entry-runtime-with-compiler',$mount函数在Vue的原型上被定义$mount函数的流程1. 首先,提取出el所对应的dom元素。其中的query函数的主要用途是使用原生的querySelector(查找第一个匹配的dom元素...原创 2018-07-02 20:03:05 · 5089 阅读 · 0 评论 -
Vue源码之render函数(四)
在$mount函数中,最后调用的updateComponent函数,该函数中的调用了实例的私有函数vm._render,因此,现在需要弄清楚vm._render函数完成了什么功能。在'src/core/instance/render.js'中,在Vue的原型上定义了私有_render函数。1. 首先从vm.$options中拿到render函数,先暂时忽略其他部分代码,然后通过调用render函数...原创 2018-07-03 15:25:39 · 1908 阅读 · 0 评论 -
Vue源码之createElement函数(五)
在render 函数中,最后调用的是createElement函数来返回vnode,那么createElement函数到底完成了什么功能1. 首先看一下VNode的定义('src/core/vdom/vnode.js'),VNode被定义为一个类。2. 在createElement中,首先检测data的类型,通过判断data是不是数组,以及是不是基本类型,来判断data是否传入。如果没有传入,则...原创 2018-07-03 17:59:13 · 10574 阅读 · 0 评论 -
Vue源码分析之依赖收集(九)
在上一章,介绍了Vue将普通对象变成响应式对象是利用defineReactive()(定义在'core/observer/index.js'中)函数,defineReactive()函数中主要关注的是新建一个dep = new Dep(),以及在设置属性的getter时,对其做依赖收集:dep.depend()export function defineReactive ( obj: Obje...原创 2018-07-10 15:56:33 · 636 阅读 · 0 评论 -
Vue源码解析之_update函数(六)
在$mount函数中,主要是调用了mountComponent函数,而该函数最后主要是调用了updateComponent函数,上一次我们分析了render函数的功能(主要是利用createElement函数生成vnode),那么_update函数主要做了什么首先,可以看到在'src/core/instance/lifecycle.js'中在Vue原型上定义了私有方法_update,在整个函数中,...原创 2018-07-06 10:26:11 · 7585 阅读 · 0 评论 -
Vue源码之createComponent函数(七)
在createElment函数创建vnode时,如果判断tag标签是组件的话,会调用createComponent函数创建vnode在createComponent(定义在'src/core/vdom/create-component.js')中,首先是获得基础构造器baseCtor。这里的context是指向vm实例。在'globalp-api/index.js'中,可以看到option._ba...原创 2018-07-06 17:14:34 · 3271 阅读 · 0 评论 -
Vue源码分析之响应式对象(八)
Vue的一个最大的特点就是数据响应式,修改数据之后即会更新视图,这样我们只需要聚焦在数据上,不必过多关注怎么取修改视图。Vue的数据响应主要是通过ES5中的Object.defineProperty()来实现的,具体怎么实现的,让我们从源码的角度分析。首先,在初始化的过程中,Vue就会为data和props里的属性加上响应式。在new Vue的过程中会执行initState(vm)函数,该函数在'...原创 2018-07-07 16:55:25 · 1210 阅读 · 0 评论