![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue源码阅读
jifukui
这个作者很懒,什么都没留下…
展开
-
Vue源码阅读之12依赖类Dep
之前的章节讲解完了Vue从BeforeCreated到mount的过程,这里我们对Vue的事件的监听进行处理,首先这里介绍的是依赖类Dep。数据成员(1)静态的监视器对象target。(2)数值类型的Dep对象的编号的id。(3)数组类型的监视器数组subs。成员函数(1)构造函数:设置Dep对象的id号,并更新全局的iD号,以及初始化subs的数组的值为空。(2)addSub方法:向Dep实例中的subs数组中添加监视器对象。(3)removeSub方法:删除Dep实例中s原创 2020-07-31 17:53:01 · 603 阅读 · 0 评论 -
Vue源码阅读之11挂载过程概述
当Vue组件的$options属性中具有el属性将会在此元素上进行挂载内容。if (vm.$options.el) { vm.$mount(vm.$options.el) } 在挂载这里就要区分Vue的一个概念,runtime only和runtime+compile,一个最主要的特征是runtime only的Vue对象中有渲染函数而runtime+compile的版本是需要经过编译生成渲染函数。 对于runtime only版本的Vu...原创 2020-06-30 20:07:06 · 192 阅读 · 0 评论 -
Vue源代码阅读10之从BeforeCreated到Created小结
经过前面的讲解我们可以看到在完成BeforeCreated之后进行了inject、props、methods、data、computed、watch、provide这些用户定义的属性的初始化过程。其中inject和provide需要搭配使用用于数据跨越组件的数据的传输。最常见和使用的是组件状态的初始化,但是需要注意props、methods、data、computed这些属性的覆盖问题,在非发布模式将会进行报错,但是在发布模式下将不会进行报错直接执行。 当程序执行到这里表明cre...原创 2020-06-29 09:44:18 · 382 阅读 · 0 评论 -
Vue源代码阅读9值provide属性初始化
provide属性和inject属性是需要进行搭配使用的,用于跨越父子组件的数据祖先组件向后代组件传输数据。这里我们将对provide属性的初始化进行讲解。export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.ca...原创 2020-06-29 09:13:18 · 345 阅读 · 0 评论 -
Vue源码阅读之8状态初始化
进入create状态的第二个过程就是状态的初始化,状态的初始化是对于Vue对象的Props,Methods,Data,watch,computed进行初始化经过这里Vue的一些关键的属性才被初始化可以去使用。export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) { initProps(vm, opts.props) } if原创 2020-06-19 14:47:12 · 121 阅读 · 0 评论 -
Vue源代码阅读之7初始化注入
讲initInjections之前首先是需要对大家进行讲解inject和provide这两个属性,这两个属性一般不建议在普通的应用程序中使用,在高等级的组件中使用用于父组件向子组件传递数据。祖先组件在provide中提供后代可使用的数据,后代组件在inject中设置使用祖先组件的属性名。export function initInjections (vm: Component) { const result = resolveInject(vm.$options.inject, vm) if原创 2020-06-17 16:10:01 · 594 阅读 · 0 评论 -
Vue源代码阅读之7从BeforeCreated到Created概述
前面讲述了从创建Vue对象到BeforeCreated之间的过程,完成了生命周期,初始化事件,初始化渲染这三个部分之后就结束了BeforeCreated过程,从而调用BeforeCreated的钩子函数,然后就正式进入了create阶段。 之前的章节里面讲过从创建Vue队形到BeforeCreated这个过程中主要是进行父子组件的相关信息的继承(事件,参数,渲染)等方面,对于具有组件特色相关的内容并未做太多的处理。我们后面将要讲解的内容create过程主要就是组件的相关参数的初始化过程,包...原创 2020-06-17 14:48:19 · 261 阅读 · 0 评论 -
Vue源代码阅读之6BeforeCreated总结
经过前面三个章节的介绍我们知道在BeforeCreated期间做了三件事情,初始化生命周期,初始化事件,初始化渲染。初始化生命周期主要是初始化Vue对象的一些过程状态查找父节点,并在父节点注册自己的相关信息。初始化事件主要是获取父节点的监听的事件,并添加到子节点上。初始化渲染主要是获取父节点的渲染内容,以及插槽,范围插槽,创建DOM元素函数的定义,继承父节点的$attrs属性和$listeners属性。从上面的介绍可以看到这里主要是子组件继承父节点的一些公有的属性,同时初始化一些自己的状态信原创 2020-06-15 10:26:31 · 1160 阅读 · 0 评论 -
Vue源码阅读之5渲染初始化
前面的章节讲述了从创建到BeforeCreated的前两个过程生命周期初始化和事件的初始化,这里讲述这里的最后一个过程渲染初始化,渲染初始化完成之后便完成了BeforeCreated。export function initRender (vm: Component) { vm._vnode = null const options = vm.$options const parentVnode = vm.$vnode = options._parentVnode const ren原创 2020-06-12 13:50:18 · 294 阅读 · 0 评论 -
Vue源码阅读之4事件初始化
之前讲到了创建Vue对象到BeforeCreated之后就会进行生命周期的初始化,这里我们将生命周期初始化之后的事件初始化initEvents。export function initEvents (vm: Component) { vm._events = Object.create(null) vm._hasHookEvent = false const listeners = vm.$options._parentListeners if (listeners) { up原创 2020-06-11 10:35:51 · 318 阅读 · 0 评论 -
Vue源码学习3之生命周期的初始化
上一个章节我们降到了从创建Vue对象到BeforeCreated过程,其中第一个过程就是生命周期的初始化。这里我们讲会讲解生命周期的初始化过程进行了哪些操作。export function initLifecycle (vm: Component) { const options = vm.$options let parent = options.parent if (parent && !options.abstract) { while (parent...原创 2020-06-10 18:37:11 · 366 阅读 · 0 评论 -
Vue 源码阅读2之从0到beforeCreated
Hello,大家好。现在咱们正式进入Vue源码阅读的主体部分。当网页中存在Vue文件在浏览器中运行的时候,Vue的环境已经存在于浏览器中。 当我们在其他脚本中执行var vm=new Vue(.....)时将会开始了Vue对象的一生。 (1)执行上述程序的时候将会调用Vue源代码目录下的/src/core/instance/index.js的Vue函数。这个函数主要的作用是调用Vue原型链上的_init函数以实现Vue对象的初始化过程。function Vue (optio...原创 2020-05-28 18:38:06 · 290 阅读 · 0 评论 -
Vue 源码阅读1之开篇感悟
随着互联网的大风越刮越大,前端的发展也是十分的迅猛,出现了各种各样的前端框架,Vue是其中的佼佼者,这一系列的文章我将以初学者的身份分析Vue的相关实现,希望能够和大家一起进步,早日实现高薪。 我个人感觉要要学习Vue的源码,Vue的生命周期是离不开的话题,每个人都知道Vue的生命周期为beforeCreate,Created,BeforeMount,Mounted,BeforeUpdate,Updated,BeforeDestroy,Destroyed。所以这一系列的文件将以生...原创 2020-05-22 13:42:49 · 141 阅读 · 0 评论