- 博客(10)
- 收藏
- 关注
RSS订阅原创 Vue 源码解读（9）—— 编译器 之 优化
前言上一篇文章 Vue 源码解读（8）—— 编译器 之 解析 详细详解了编译器的第一部分，如何将 html 模版字符串编译成 AST。今天带来编译器的第二部分，优化 AST，也是大家常说的静态标记。目标深入理解编译器的静态标记过程源码解读入口/src/compiler/index.js/** * 在这之前做的所有的事情，只有一个目的，就是为了构建平台特有的编译选项（options），比如 web 平台 * * 1、将 html 模版解析成 ast * 2、对 ast 树进行静态标
2021-08-18 22:16:55
154
原创 Vue 源码解读（8）—— 编译器 之 解析（下）
processAttrs/src/compiler/parser/index.js/** * 处理元素上的所有属性： * v-bind 指令变成：el.attrs 或 el.dynamicAttrs = [{ name, value, start, end, dynamic }, ...]， * 或者是必须使用 props 的属性，变成了 el.props = [{ name, value, start, end, dynamic }, ...] * v-on
2021-08-17 21:01:48
288
原创 Vue 源码解读（8）—— 编译器 之 解析（上）
前言Vue 源码解读（4）—— 异步更新 最后说到刷新 watcher 队列，执行每个 watcher.run 方法，由 watcher.run 调用 watcher.get，从而执行 watcher.getter 方法，进入实际的更新阶段。这个流程如果不熟悉，建议大家再去读一下这篇文章。当更新一个渲染 watcher 时，执行的是 updateComponent 方法：// /src/core/instance/lifecycle.jsconst updateComponent = () =>
2021-08-16 11:13:53
2427
原创 Vue 源码解读（7）—— Hook Event
前言Hook Event（钩子事件）相信很多 Vue 开发者都没有使用过，甚至没听过，毕竟 Vue 官方文档中也没有提及。Vue 提供了一些生命周期钩子函数，供开发者在特定的逻辑点添加额外的处理逻辑，比如：在组件挂载阶段提供了 beforeMount 和 mounted 两个生命周期钩子，供开发者在组件挂载阶段执行额外的逻辑处理，比如为组件准备渲染所需的数据。那这个 Hook Event —— 钩子事件，其中也有钩子的意思，和 Vue 的生命周期钩子函数有什么关系呢？它又有什么用呢？这就是这边文章要解
2021-08-12 21:37:21
207
原创 Vue 源码解读（6）—— 实例方法
前言上一篇文章 Vue 源码解读（5）—— 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$setvm.$deletevm.$watchvm.$onvm.$emitvm.$offvm.$oncevm._updatevm.$forceUpdatevm.$destroyvm.$nextTickvm._render源码解读入
2021-08-11 17:50:14
330
原创 Vue 源码解读（5）—— 全局 API
目标深入理解以下全局 API 的实现原理。Vue.useVue.mixinVue.componentVue.filterVue.directiveVUe.extendVue.setVue.deleteVue.nextTick源码解读从该系列的第一篇文章 Vue 源码解读（1）—— 前言 中的 源码目录结构 介绍中可以得知，Vue 的众多全局 API 的实现大部分都放在 /src/core/global-api 目录下。这些全局 API 源码阅读
2021-08-10 14:38:25
237
原创 Vue 源码解读（4）—— 异步更新
前言上一篇的 Vue 源码解读（3）—— 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter、setter，从而拦截对数据的访问和设置。当对数据进行更新操作时，比如 obj.key = 'new val' 就会触发 setter 的拦截，从而检测新值和旧值是否相等，如果相等什么也不做，如果不相等，则更新值，然后由 dep 通知 watcher 进行更新。所以，异步更新 的入口点就是 setter 中最后调用的 dep.notify() 方法。目的
2021-08-06 21:48:00
230
原创 Vue 源码解读（3）—— 响应式原理
前言上一篇文章 Vue 源码解读（2）—— Vue 初始化过程 详细讲解了 Vue 的初始化过程，明白了 new Vue(options) 都做了什么，其中关于 数据响应式 的实现用一句话简单的带过，而这篇文章则会详细讲解 Vue 数据响应式的实现原理。目标深入理解 Vue 数据响应式原理。methods、computed 和 watch 有什么区别？源码解读经过上一篇文章的学习，相信关于 响应式原理 源码阅读的入口位置大家都已经知道了，就是初始化过程中处理数据响应式这一步，即调用
2021-08-05 18:29:56
371
原创 Vue 源码解读（2）—— Vue 初始化过程
目标深入理解 Vue 的初始化过程，再也不怕 面试官 的那道面试题：new Vue(options) 发生了什么？找入口想知道 new Vue(options) 都做了什么，就得先找到 Vue 的构造函数是在哪声明的，有两个办法：从 rollup 配置文件中找到编译的入口，然后一步步找到 Vue 构造函数，这种方式 费劲通过编写示例代码，然后打断点的方式，一步到位，简单我们就采用第二种方式，写示例，打断点，一步到位。在 /examples 目录下增加一个示例文件 —— test.
2021-08-04 17:36:33
394
原创 Vue 源码解读（1）—— 前言
前言最近在准备一些 Vue 系列的文章和视频，之前 Vue 的源码也读过好几遍，但是一直没写相关的文章，所以最近就计划写一写。目标精通 Vue 技术栈的源码原理，这是这系列的文章最终目的。首先会从 Vue 源码解读开，会产出一系列的文章和视频，从详细刨析源码，再到 手写 Vue 1.0 和 Vue 2.0。之后会产出周边生态相关库的源码分析和手写系列，比如：vuex、vue-router、vue-cli 等。相信经过这一系列的认真学习，大家都可以在自己的简历上写上这么一条：精通 Vue 技术栈的.
2021-08-03 16:31:51
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人