f18855666661的博客

keep-alive 组件的官方文档点击这里。1，keep-alive 组件的实现原理首先说清楚keep-alive 组件的实现原理，然后再解析 keep-alive 组件的源码。1-1，keep-alive 组件与插槽keep-alive 组件的实现与插槽有一定的关系，插槽的解析可以看我的这篇文章。keep-alive 组件能够缓存子组件的状态，使用代码如下所示：<keep-alive> <component :is="view"></..

异步组件的官方文档点击这里。借助于异步组件，我们可以将 Vue 项目按照组件分割成一些小的代码块，并且让这些代码块在前端需要时才从服务器进行加载。这种优化措施在大型应用中是很有必要的，可以大大缩短首次加载的时间。在这里，建议读者先将 Vue 官网中的异步组件部分复习一遍，了解异步组件的写法。1，异步组件的加载时机首先说明一下异步组件触发加载的时间，异步组件的加载是在执行 render 函数创建vnode 的过程中，如果判断出当前创建 vnode 的组件是异步组件的话，则会执行 reso..

过滤器的官方文档可以点击这里。今天和大家说说过滤器的实现原理，主要看过滤器模板字符串的编译和过滤器模板字符串编译出来的代码字符串。我们以下面的代码为例：Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})Vue.filter('pref.

provide/inject 的官方文档点击这里。今天和大家讲讲provide/inject 的内部实现原理，该功能的实现是在 Vue 的实例化阶段，也就是 _init 原型函数中，相关代码如下所示：export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this ..

这篇博客旨在从源码的角度全面的概括Vue 的运行流程，让大家对 Vue 的总体知识体系有所了解，也是对前面写的 30 篇文章的一个小总结，首先抛出 Vue 官网中的生命周期图，如下所示：这张图是 Vue 官网中的生命周期图，相信大家对这张图都很熟悉了，接下来，我们从源码的角度对图中的内容进行一步步的解析。1，new Vue() ==> beforeCreate1-1，执行 new Vue()function Vue (options) { // 执行 vm 原型上的 _.

今天和大家讲讲标题中五个全局 API 的源码，这些 API 的内部实现都很简单。1，Vue.directive，Vue.filter，Vue.component在这里，将这三个 API 放在一起讲，因为这三个 API 在源码中的实现是放在一起的，这三个 API 的功能也很相似，都是向 Vue.options 对象上注册添加或者获取指定的资源，这里的资源是指 指令、过滤器和组件，通过将这些资源注册到 Vue.options 对象上，可以使得后续创建的组件实例可以使用到这些资源。官方文档请点击V.

最好先看下我的上篇文章，上篇文章的内容在本篇文章中能够用到，点击这里。Vue.extend API 的官方文档点击这里。Vue.extend 是 Vue 中很重要的一个方法，虽然在平时的开发中很少用到它，但是在 Vue 源码内部，extend 方法却很重要。为什么说这个方法很重要呢？是因为在 Vue 中，组件的本质就是通过 extend 方法创建出来的 Vue 构造函数的子级构造函数。我们知道 extend 方法的参数是一个组件选项对象，extend 方法的内部会创建一个 Sub 函数并最..

今天和大家讲讲在 Vue 源码中很重要的一个方法 — mergeOptions()，该方法的作用是合并 options，主要在以下三个地方会被使用到：Vue 实例初始化时，用于构造函数 options 和当前实例 options 的合并。 Vue.mixin 全局方法内部直接调用 mergeOptions() 方法实现功能。 Vue.extend 全局方法内部会调用 mergeOptions() 实现父级 options 和传递配置 options 的合并。这里所说的 options 存在于 Vu

官方文档点击这里。今天和大家讲讲 Vue 中的 vm.$nextTick 和 Vue.nextTick，这两个方法的底层实现是一样的，都是使用了名为 nextTick 的公共方法，看下面的源码。声明 Vue 的原型函数 $nextTick，这个原型函数能够在 Vue 的实例上访问：// src/core/instance/render.jsimport { nextTick} from '../util/index'export function renderMixin (Vu.

建议先复习一下插槽的用法，官方文档点击这里。今天和大家讲讲 Vue 中的插槽功能，主要从普通插槽、后备内容、具名插槽、作用域插槽这四个知识点进行解析。1，普通插槽对应文档点击这里。首先从插槽最简单的用法讲起，实现功能的重点是子组件的实例和子组件的 render 函数，我们以下面这个简单的例子进行解析。Vue.component('hello-world', { template: ` <div class="hello_world"> &lt.

今天和大家讲讲 v-model 的底层原理，v-model 既可以用在自定义的组件上，也可以用在表单输入元素上，这两者在 v-model 的使用体验上几乎一模一样，但是底层的实现原理却有所差别，应该分开进行讨论解析。不管是用在组件上还是用在原生的表单元素上，v-model 的本质都是语法糖，也就是说 Vue 通过编译器和 render 函数，使得在模板字符串中不管是使用 v-model="message" 还是使用<component-a :value="message" @input="inp.

今天讲讲 v-on 指令的底层实现原理。在 Vue 中，v-on 指令有两种用法，第一种是将 v-on 指令使用在自定义组件上，例如：<my-component v-on:myEvent="doSomething"></my-component>，使用 v-on 指令监听了组件的 myEvent 事件，回调函数是doSomething，当在组件中执行 this.$emit('myEvent') 时，会触发执行 doSomething 函数，有没有发现这和我上一篇文章中的 vm.$o.

本想写 v-on 指令的源码解析，但是 v-on 指令的底层会使用到标题中的四个实例方法，所以，今天先把这四个与事件有关的实例方法讲清楚。知识补充：上面说的实例是指 Vue 实例，在 Vue 应用中有两种类型的 Vue 实例，第一种是通过 new Vue({xxx}) 手动创建的 Vue 实例。第二种是组件 Vue 实例，当我们在模板中使用组件的时候，Vue 会为使用的每个组件创建对应的 Vue 实例。先看下这四个方法是如何绑定到 Vue实例上的。src/core/instance/ind.

开始正文前，大家可以先复习一下 v-for 指令的用法，对应的官方文档点击这里。今天和大家讲讲 v-for 指令的底层实现原理，它的底层实现其实很简单，主要看v-for 指令对应的代码字符串是如何生成对应 vnode 的，我们以一个简单的例子进行解析。new Vue({ el: '#app', data() { return { names: ['小明', '小花', '小山'] } }, methods: {}, template: ` ..

v-show 和 v-if 虽然在页面上的效果差不多，但是他们底层的实现却完全不一样。v-if 是在模板编译阶段实现功能的，通过 v-if 指令可以控制目标节点是否存在于真实的DOM中，v-if 的源码解析可以看我之前写的这篇文章。而 v-show 的本质是 Vue 中内置的一个自定义指令，借助于 v-show 我们可以控制目标节点 style 中的 display 属性值，关于自定义指令的源码解析可以看我的这篇文章。接下来我们开始 v-show 的源码解析。v-show 内置自定义指令定义在src/.

今天解析 v-text、v-html、v-pre、v-once 等指令的底层实现原理，以具体的例子为出发点进行讲解。1，v-textv-text 的官方文档点击这里。v-text 的底层实现原理是更新目标元素的textContent 属性。首先看下例子：new Vue({ el: '#app', data() { return { name: 'tom' } }, template: ` <div id="app">.

在讲正文之前，大家先把官网中有关自定义指令的内容再看一遍，带着疑问看解析。自定义指令的源码牵扯到了前面没有讲到的知识点，所以先对这些需要的知识点做下补充。1，知识补充1-1，虚拟DOM在渲染时，会触发钩子函数在前面的文章Vue源码阅读（17）：patch() 方法中，我主要讲了组件在重新渲染时，对 DOM 内容的更新。其实 Vue 除了对 DOM 内容进行了更新外，还做了其他的操作，其中之一就是虚拟 DOM 在渲染时会触发对应的钩子函数。没错，每一个虚拟 DOM 都有钩子函数，在渲...

前面的 17 篇文章对 Vue 底层的核心运行机制进行了解析，接下来，开始对 Vue 中的众多特性进行针对化的讲解。首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令，这些指令是在模板编译阶段实现的。1，v-ifv-if 的用法如下所示：<template> <div id="app"> <h1 v-if="isShow">Hello Vue h1</h1> </div></t

虚拟 DOM 中最为核心的部分是 patch() 方法，通过该方法，Vue 可以将最新的 vnode 渲染到页面上，实现组件的重新渲染。patch() 方法在重新渲染组件的时候，并不会使用暴力覆盖的方法，而是细心的比较新老 vnode 之间的差异，只对有差异的地方进行真实 DOM 的更新操作。这样，就可以极大的减少操作真实 DOM 的次数，提高性能。patch() 方法中使用的算法就是广为人知的 diff 算法。diff 算法主要有四块内容，分别是：创建节点 删除节点 更新节点 更新子节点

vnode 是虚拟DOM 中一个很重要的知识点，今天带大家了解一下。1，什么是 VNode首先说下什么是 VNode，VNode 的本质只是 JavaScript 中普通的对象字面量，只不过这个对象字面量中的属性可以很好的描述网页中的真实DOM，并且可以通过 VNode 创建出对应的真实的DOM 节点。在源码中，有一个类专门用于实例化vnode对象。export default class VNode { tag: string | void; data: VNodeData ..

虚拟DOM 是 Vue 中一个很重要的知识点，今天和大家分享一下我的的理解。1，虚拟DOM 解决了什么问题2，虚拟DOM 的运行流程

代码生成器是模板编译的最后一步，所做的工作是根据 AST（抽象语法树）生成代码字符串，这个代码字符串就是 render 函数的代码内容，代码字符串可以通过 new Function(code) 生成真正的 render 函数。render 函数的作用是生成 vnode（虚拟 DOM），vnode 可以理解成真实 DOM 的抽象表示，通过 vnode 可以在页面上渲染出对应的真实 DOM，使用 vnode 的好处是：Vue 可以根据新旧vnode 之间的差异计算出哪些真实DOM 需要更新，然后只更新需..

优化器的逻辑相比解析器简单了很多，其只做了两件事：标记静态节点和标记静态根节点，所以理解起来会轻松很多。为什么要做优化操作呢？因为在一个 Vue 应用中，有些页面内容是不随数据的改变而改变的，这些页面内容只需要在初次渲染的时候渲染一次就可以了，所以需要借助优化器打个静态的标记，这样在 patch 的环节，就可以直接跳过静态节点，提高性能。这一小节，代码解释都在注释中，我写的很详细。1，src/compiler/optimizer.js ==>optimizeexport fun.

今天聊聊解析器，解析器的作用是将程序员编写的模板字符串解析成抽象语法树，抽象语法树可以理解成模板字符串的对象表示形式，其本质并没有什么神奇的，只不过是 JS 中最为常见的对象字面量。通过抽象语法树，Vue 可以以一种统一的格式来表示不同编码风格的模板字符串，这种统一是接下来进行优化器和代码生成器处理的基础。接下来，我们看一个简单模板字符串解析成的抽象语法树是什么样的。new Vue({ template: ` <div class="container"> &l

我们对 Vue 中的虚拟 DOM 都比较了解，知道虚拟 DOM 是通过执行 render 函数获取到 vnode，然后执行 patch 方法，将 vnode 渲染成真实的 DOM。那么，Vue 是如何获取到 render 函数的呢？获取的途径有两个：我们可以直接在组件的 render 选项上直接写 render 函数，这样 Vue 内部直接从 render 选项上获取 render 函数即可，这部分可以直接看官方文档。 Vue 可以通过模板编译将模板字符串（template）编译成 render

看原理解析前，先把 $watch 的官方文档看一下。vm.$watch API 的作用很简单，就是对一个目标进行监控，一旦该目标变化了的话，就会触发注册的回调函数，接下来开始看源码。1，src/core/instance/state.js ==> stateMixin()export function stateMixin (Vue: Class<Component>) { Vue.prototype.$watch = function ( expOrFn:..

我们上文说了，Vue 是通过 Object.defineProperty 和重写数组的原型方法来达到监控数据的目的。但是，在某些情况下，上面两种方案无法做到监控数据的变化，例如：（1）：当我们给对象设置一个新属性的时候，obj.newProperty = xxxxx；（2）：当我们删除对象中的某个属性的时候，delete obj.oldProperty；上面两种情况，Vue 的响应式系统都监控不到，为了弥补这两个缺陷，Vue 提供了 $set 和 $delete API，当我们想设置新的属性，或

通过上一篇文章Vue源码阅读（7）：将数据转换成响应式的我们已经了解了数据是怎么转换成响应式的了，接下来我们以组件的渲染为例看 Vue 在运行时是如何进行依赖收集和变化侦测的。1，从 $mount 开始看1-1，_init 方法（core/instance/init.js）export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) ..

1，对数据响应式处理的入口第一小节是为了让大家了解响应式处理的代码在整体源码中的位置。1-1，执行 new Vue（core/instance/index.js）function Vue (options) { // 执行 vm 原型上的 _init 方法，该方法在 initMixin 方法中定义 this._init(options)}// 写入 vm._initinitMixin(Vue)vue 里面执行 _init 方法，该方法定义在 initMixin 方法中。

Vue 最终渲染的真实 DOM 是由模板字符串和数据（状态）决定的，一旦状态改变，页面就会自动重新渲染。这一特性是 Vue 的响应式系统赋予的，响应式系统主要围绕数据（状态）做了两件事：（1）收集依赖；（2）变化侦测。1，什么是收集依赖如果组件 componentA 使用了数据 dataB 的话，我们就可以说组件 componentA 依赖了数据 dataB。此时，应该把这个依赖收集保存起来，以供后续变化侦测调用触发。2，什么是依赖在 Vue 中，有一个专门的类用来表示依赖，Watch，他被

在讲正文之前，最好先了解一下new 操作符的运行机制。在Vue源码阅读之路（4）中，我们知道，Vue 函数定义在src/core/instance/index.js 文件中，先看一下 Vue 函数的定义。1，src/core/instance/index.jsfunction Vue (options) { // 如果当前的环境不是生产环境，并且当前命名空间中的 this 不是 Vue 的实例的话, // 发出警告，Vue 必须通过 new Vue({}) 使用，而不是把 Vu...

我们在平时的开发中，一般是使用下面的代码使用 Vue：import Vue from 'vue'import App from './app.vue'new Vue({ el: '#app', data() { return {} }, render: h => h(App)})那么，你肯定有过这样的疑问，这个导入的Vue 到底是什么？它是怎么初始化的呢？今天的这篇博客就来解答这个疑问。1，src/platforms/web/entry-runtime-.

阅读一个库的源码前，最好先看一下这个项目是如何构建的，尤其是像 Vue 这样代码量大，并且支持多个版本、多个平台的开源库。通过解读项目的构建过程，也可以更加了解整体代码的架构设计。1，从 package.json 开始与构建有关的三个命令如下，运行不同的命令，能够进行不同 Vue 版本的构建工作。我们可以看到"build:ssr" 和"build:weex" 命令都是执行 "build" 命令完成任务的，只不过后面传递的参数不一样，这些参数在 build/build.js 的执行过程中起到过滤 ..

1，目录结构├─build // 存放 Vue 项目的编译和发布脚本 │├─dist // 存放编译后的文件││ // 完整版（编译器 + runtime），采用commonjs模块规范的编译文件│ vue.common.js│

研究Vue源码有段时间了，从一开始对Vue底层源码的一无所知，感到彷徨和迷茫，到现在的略有小成。期间收获了很多，但目前的程度还远远没有达到我对自己的要求，我希望自己对整个Vue源码都了解和精通，因为自己真的非常喜欢Vue，是Vue让我喜欢上了前端。但最近因为一些外在的原因，导致自己分心，效率很低。所以我决定，每隔一到三天写一篇关于Vue源码的文章，一来可以督促自己，坚持不懈怠，二来也可以帮助和我一样对Vue感兴趣的朋友。加油。...