SF
Vue源码探究
Vue源码探究
注册登录
关注博客
注册登录
主页
关于
RSS
Vue源码探究-组件的持久活跃
Shio
2019-01-09
阅读 5 分钟
1.9k
较新版本的Vue增加了一个内置组件 keep-alive,用于存储组件状态,即便失活也能保持现有状态不变,切换回来的时候不会恢复到初始状态。由此可知,路由切换的钩子所触发的事件处理是无法适用于 keep-alive 组件的,那如果需要根据失活与否来给予组件事件通知,该怎么办呢?如前篇所述,keep-alive 组件有两个特有的生命周...
Vue源码探究-全局API
Shio
2018-12-13
阅读 9 分钟
2.5k
Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言。这里主要来看一下全局API模块的实现。全局API的文件夹里有一个入口文件,各个功能分开定义,在这个入口文件中统一注入。
Vue源码探究-虚拟DOM的渲染
Shio
2018-12-03
阅读 25 分钟
2.6k
按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理。这也是开始 mount 路径的前一步。初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性。
Vue源码探究-虚拟节点的实现
Shio
2018-11-23
阅读 6 分钟
2.5k
页面初始化的所有状态都准备就绪之后,下一步就是要生成组件相应的虚拟节点—— VNode。初次进行组件初始化的时候,VNode 也会执行一次初始化并存储这时创建好的虚拟节点对象。在随后的生命周期中,组件内的数据发生变动时,会先生成新的 VNode 对象,然后再根据与之前存储的旧虚拟节点的对比来执行刷新页面 DOM 的操作。...
Vue源码探究-状态初始化
Shio
2018-11-14
阅读 13 分钟
2k
继续随着核心类的初始化展开探索其他的模块,这一篇来研究一下Vue的状态初始化。这里的状态初始化指的就是在创建实例的时候,在配置对象里定义的属性、数据变量、方法等是如何进行初始处理的。由于随后的数据更新变动都交给观察系统来负责,所以在事先弄明白了数据绑定的原理之后,就只需要将目光集中在这一部分。
Vue源码探究-数据绑定的实现
Shio
2018-11-04
阅读 16 分钟
1.8k
在这里记录下了Vue的数据绑定具体实现的源代码的个人理解,有些细节的地方或许还认识的不够充分,观察系统里的三个类兜兜转转,关联性很强,在各自的方法中交叉地引用自身与其他类的实例,很容易让人头晕目眩,不管怎样,对于整体功能逻辑有清晰的认识,以后便能向更高层面迈进。
Vue源码探究-数据绑定逻辑架构
Shio
2018-10-29
阅读 3 分钟
1.8k
数据观察系统是Vue实现数据绑定、异步更新的核心模块,数据观察系统的实现也是Vue源码里最为复杂的部分,在仔细研究具体实现之前,先对整个数据绑定的逻辑架构进行一个充分的认识,会更有助于解读源码。
Vue源码探究-事件系统
Shio
2018-10-22
阅读 8 分钟
3k
头部先是引用了的一些工具方法,没有什么难点,具体可以查看相应文件。唯一值得注意的是引用自虚拟节点模块的一个叫 updateListeners 方法。顾名思义,是用来更新监听器的,至于为什么要有这样的一个方法,主要是因为如果该实例的父组件已经存在一些事件监听器,为了正确捕获到事件并向上冒泡,父级事件是需要继承下来的...
Vue源码探究-生命周期
Shio
2018-10-15
阅读 7 分钟
3.5k
初步探索完了核心类的实现之后,接下来就要开始深入到Vue实现的具体功能部分了。在所有的功能开始运行之前,要来理解一下Vue的生命周期,在初始化函数中所有功能模块绑定到Vue的核心类上之前,最先开始执行了一个初始化生命周期的函数initLifecycle(vm),先来看看这个函数做了些什么。
Vue源码探究-类初始化函数详情
Shio
2018-10-08
阅读 8 分钟
2k
随着初始化函数的执行,实例的生命周期也开始运转,在初始化函数里可以看到每个模块向实例集成的功能,这些功能的具体内容以后在单独的文章里继续探索。现在来详细看看类初始化函数的详细代码。
Vue源码探究-核心类的实现
Shio
2018-09-28
阅读 4 分钟
2.1k
几乎所有JS框架或插件的编写都有一个类似的模式,即向全局输出一个类或者说构造函数,通过创建实例来使用这个类的公开方法,或者使用类的静态全局方法辅助实现功能。相信精通Jquery或编写过Jquery插件的开发者会对这个模式非常熟悉。Vue.js也如出一辙,只是一开始接触这个框架的时候对它所能实现的功能的感叹盖过了它也...
Vue源码探究-构建版本的区别
Shio
2018-09-22
阅读 3 分钟
3.3k
基于第三方性能评估工具Benchmark的测评结果可以看出Vue 2.0版本在整体的性能上得到了大幅优化,即使与React和Angular最新版相比也相差无几。在提供给使用者的构建版本方面,也进行了针对性的细化,输出了多种不同的版本,以便满足不同需求的开发者使用更精细更适合自己的版本。
Vue源码探究-源码文件组织
Shio
2018-09-17
阅读 2 分钟
2.9k
Vue 2.0版本的大整改不仅在于使用功能上的优化和调整,整个代码库也发生了天翻地覆的重组。可见随着使用者的增加与声名传播,Vue自身的格局发生了很大的突破,特别体现在对Weex框架做了内部支持。不管在未来是使用Weex或者与NativeScript结合做跨平台应用开发,都还是能与React、Angular保持三足鼎立的势头。