Vue3 源码系列

Vuex是官方提供的状态管理库，为了深入了解它的实现逻辑，本文我们一起来一步步实现它。 初始化 用法 模拟实现 state 用法 代码实现 getters 用法 代码实现 工具函数 mutation

在Vue 3.0的使用中我们可以不使用data、props、methods、computed等Option函数，可以只下在setup函数中进行编写代码逻辑。当然为了和Vue 2.0兼容，也可以继续使用

侦听器的实现逻辑 我们先来看看一个最简单的使用方式(watch的使用方式非常灵活，我们通过简单的使用方式来了解流程)： 对监听数据求值的实现 逻辑在doWatch方法中： 数据响应式的实现 目前只需要

keep-alive组件是Vue提供的组件，它可以缓存组件实例，在某些情况下避免了组件的挂载和卸载，在某些场景下非常实用。 例如最近我们遇到了一种场景，某个组件上传较大的文件是个耗时的操作，如果上传的

Vue的事件绑定主要是通过v-on指令来实现的，这个指令既可以实现原生事件绑定，例如onclick等。也可以实现组件的自定义事件，从而实现组件的数据通信。 本文我们就来分析下Vue的事件处理的逻辑。

Vue的双向绑定是指数据变化能引起界面的变化，界面数据的变化也能驱动数据的改变。 这个功能其实和单向数据流规范不一样，所以开始接触Vue的时候非常吸引我的一个功能。我们发现Element UI的表单也

Vue 3.X 使用Vue Router 4.x 进行路由配置，本文我们就来研究下如何使用Vue Router 4.x，本文中所有的使用方式都是使用 Composition API的方式。 本文通过一

前面关于响应式的两篇文章，分别介绍了响应式实现原理和计算属性，本篇文章我们来看看其他响应式API的使用和实现原理。 reactive 使用方式 实现原理 请参阅本系列的Vue3.0 响应式实现原理分析

Vue3.0 新增了一个Teleport组件，开发者可以使用它将其所在组件模板的部分内容移动到特定的DOM位置，譬如body或者其他任意位置。 Vue 2.0要实现对应的功能则需要使用portal-v

Vue 指令 是指 对普通DOM元素进行底层操作的JS对象， 它们会被挂在Element VNode对象上，在Element VNode的一些生命周期中会被调用，从而可以操作Element VNode

我们在上一章节介绍了响应式的原理，本文我们来探讨一下Vue 3.0的计算属性的实现原理。如果没有阅读过上一篇文章，建议请先阅读上一篇文章再来看本文，否则可能会有些迷糊。 使用方法 我们先来看看计算属性

上一篇文章我们知道了指令的实现原理，接下来我们来研究下Vue提供的一些默认指令的实现原理。 v-text 使用案例 实现逻辑 先来看下render函数 总结 v-text设置元素的textConten

Vue提供了pro可以进行参数的传递，但是有时需要给子组件的模板进行定制化，此时传递参数有时候就不太方便了。 Vue借鉴了Web Components实现了插槽slot。 插槽slot通过在父组件中编

Vue简单易上手，只需要简单的文档说明就能上手开发。虽然本人也有一直使用Vue 2.0的项目开发经验，以前也只了解一点核心代码逻辑，没有全面阅读过Vue 2.0的源码。Vue 3.0发布后我也有了一些

上篇文章我们介绍了组件的渲染流程，本篇文章我们来介绍响应式数据变化后组件的更新渲染流程。最后有不看文章的分析总结图。 案例 为了方便介绍流程，我们这里举一个例子： App组件中有一个Hello组件，并

我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持，但是这个API不能监听对象属性的监听和删除，此外为了深度劫持对象的内部属性，必须在初始化的

Vue.js可以让组件的使用者在组件外部传递props参数，组件拿到这些props的值来实现各种各样的功能。本文我们就来探讨下组件props的初始化和更新流程。 在前一篇文章中，我们知道setup函数

reactive对传入的类型是有限制的，必须是对象或者数组。对一些基础类型，例如string, number，boolean等不支持，如果要使用reactiveAPI必须将这些基础类型封装成对象，这样

Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言，Provide和Inject传值更方便，相比vuex又更轻量。 接下来我们就从使用和实现原理两