前言 上一篇文章 Vue 源码解读(5)-- 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理,本篇文章将会详细介绍各个实例方法的实现原理. 目标 深入理解以下实例方法的实现原理. vm.$set vm.$delete vm.$watch vm.$on vm.$emit vm.$off vm.$once vm._update vm.$forceUpdate vm.$destroy vm.$nextTick vm._render 源码解读 入口 /src/core/instance…

前言 上一篇文章 Vue 源码解读(10)-- 编译器 之 生成渲染函数 最后讲到组件更新时,需要先执行编译器生成的渲染函数得到组件的 vnode. 渲染函数之所以能生成 vnode 是通过其中的 _c._l.._v._s 等方法实现的.比如: 普通的节点被编译成了可执行 _c 函数 v-for 节点被编译成了可执行的 _l 函数 ... 但是到目前为止我们都不清楚这些方法的原理,它们是如何生成 vnode 的?只知道它们是 Vue 实例方法,今天我们就从源码中找答案. 目标 在 Vue 编译器…

前言 前面我们说到,当组件更新时,实例化渲染 watcher 时传递的 updateComponent 方法会被执行: const updateComponent = () => { // 执行 vm._render() 函数,得到 虚拟 VNode,并将 VNode 传递给 vm._update 方法,接下来就该到 patch 阶段了 vm._update(vm._render(), hydrating) } 首先会先执行 vm._render() 函数,得到组件的 VNode,并将 VNod…

前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对数据进行更新操作时,比如 obj.key = 'new val' 就会触发 setter 的拦截,从而检测新值和旧值是否相等,如果相等什么也不做,如果不相等,则更新值,然后由 dep 通知 watcher 进行更新.所以,异步更新 的入口点就是 setter 中最后调用的 dep.notify()…

特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了两篇文章,本篇是对 Vue 源码解读(8)-- 编译器 之 解析(上) 的一个补充,所以在阅读时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(上) 一起阅读. processAttrs /src/compiler/parser/index.js /** * 处理元素上的所有属性: * v-bind 指令变成:el.attrs 或 el.dynamicAttrs = [{ name, value,…

前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以及标签上的各个属性,得到 AST 语法树,然后基于 AST 语法树进行静态标记,首先标记每个节点是否为静态静态,然后进一步标记出静态根节点.这样在后续的更新中就可以跳过这些静态根节点的更新,从而提高性能. 这最后一部分讲的是如何从 AST 生成渲染函数. 目标 深入理解渲染函数的生成过程,理解编译器…

当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star. 简介 专栏的第一篇,主要介绍专栏的目的.规划.适用人群,以及准备工作和扫盲的基础知识. 前言 最近在准备一些 Vue 系列的文章和视频,之前 Vue 的源码也读过好几遍,但是一直没写相关的文章,所以最近就计划写一写. 目标 精通 Vue 技术栈的源码原理,这是这系…

当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star. 目标 深入理解 Vue 的初始化过程,再也不怕 面试官 的那道面试题:new Vue(options) 发生了什么? 找入口 想知道 new Vue(options) 都做了什么,就得先找到 Vue 的构造函数是在哪声明的,有两个办法: 从 rollup 配置文件…

前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过,而这篇文章则会详细讲解 Vue 数据响应式的实现原理. 目标 深入理解 Vue 数据响应式原理. methods.computed 和 watch 有什么区别? 源码解读 经过上一篇文章的学习,相信关于 响应式原理 源码阅读的入口位置大家都已经知道了,就是初始化过程中处理数据响应式这一步,即调用…

目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set Vue.delete Vue.nextTick 源码解读 从该系列的第一篇文章 Vue 源码解读(1)-- 前言 中的 源码目录结构 介绍中可以得知,Vue 的众多全局 API 的实现大部分都放在 /src/core/global-api 目录下.这些全局 API 源码阅读入口则是在 /src/cor…