![](https://img-blog.csdnimg.cn/20210721143928558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue源码深度解析系列
文章平均质量分 94
逐行解析Vue源码,全面了解Vue核心模块底层实现原理。
未生丶silence
匠心不易,方得不凡。
展开
-
Vue响应式原理中篇:结合源码来理解响应式原理!
上一章我们通过从零构建了一个极简响应式系统后,对响应式系统中的Dep类、Watcher类和defineReactive方法都有了一定的了解。这一章我们将会结合源码来看看Vue到底是如何实现响应式系统的,以及还有哪些细节需要我们注意和优化。 这一章主要分为以下几个模块: observe方法的作用与实现 Observer类的实现 defineReactive方法做了哪些额外处理? 拦截数组变异方法 - Vue是如果处理数组的监听的? $set/$del的实现 Dep类的实现 Watc原创 2021-07-22 08:58:21 · 151 阅读 · 0 评论 -
Vue响应式原理上篇:如何从零构建一个响应式系统?
响应式系统是什么? 以一个简单例子来说明响应式系统? 什么是依赖?什么是依赖搜集? Watcher 是什么? Dep 是什么? 如何建立Dep和Watcher之间的关系? 完整的实现一个简单的响应式系统? 简介 响应式系统是Vue非常核心的特性之一。每当我们在Vue中改变数据时,视图会自动进行更新,不用我们做额外的处理,极大地提高了我们的开发效率。 那么,Vue又是如何实现响应式系统的呢?其实,响应式系统的核心实现是主要运用了一个方法 - Object.defineProp..原创 2021-07-21 13:03:01 · 121 阅读 · 0 评论 -
Vue源码解析: 丰富的选项合并策略
简介 在Vue的初始化过程中,最开始的阶段就是选项合并阶段。它通过调用mergeOptions函数将两个选项配置合并成一个选项配置。这里的选项options的形式实际上就是我们平时开发时在Vue中写的对象配置,形式如下: { components: {}, filters: {}, data() { return {} }, computed: {}, created: {}, methods: {}, ... } 因此,选项合并实际可以简单的看作是两个上面的对象合原创 2021-07-20 13:35:29 · 349 阅读 · 0 评论 -
Vue源码解析:Vue是如何设计的?
项目文件结构 在Vue项目中,所有核心的代码都是在src目录下完成,为了更好的了解Vue的底层实现,我们首先来了解一下src目录下代码的组织情况,从全局入手,在脑海里留下简单的印象,方便后续的学习。(注意:当前使用Vue的版本为2.6.12,不同版本的内容可能会有所差异) . ├── compiler // 编译模块:将 template 编译成为可以生成 vnode 的 render 函数 │ ├── codeframe.js │ ├── codegen // 代码生成文原创 2021-07-20 00:41:16 · 221 阅读 · 0 评论