Vue3源码解析

前言 在 Vuejs 中，内置了 KeepAlive​组件用于缓存组件，可以避免组件的销毁/重建，提高性能。假设页面有一组 Tab​组件，如下代码所示： 可以看到，根据变量 currentTab​的不

响应式指的是，当数据发生变化时，视图会跟着变化。以下是以reactive​ 为例介绍响应式入口、依赖收集和派发更新的实现原理： 以上例子中，定义响应式对象state​,初次渲染count​的值为0​。

isRef 是用于判断一个对象是否被ref实例对象所包裹； unRef 省略ref调用值时的.value​操作，直接进行数据的操作获取； 当使用.value​太频繁的时候，不知道后面的值到底有没有.v

使用案例 从上面的例子可以看到，对于 watch，它能接收的第一个参数类型非常多。 你可以传入一个ref对象、一个响应式对象、一个 getter 函数、甚至是一个数组。 我们在上一篇中知道了compu

mount函数创建虚拟节点之后就会调用render函数，而render函数内部的核心就是patch函数，也就是大名鼎鼎的diff算法。 Vue 中的节点类型可以分为以下几类： 基础节点类型 Text:

首先引入 ref​ 和 effect​ 两个函数，之后声明 name​ 响应式数据，接着又执行 effect​ 函数，该函数传入了一个匿名函数，最后两秒后又修改 name​ 值。 ref 实现 ​re

在 Vue 3 中, computed 是一个用于定义和计算响应式计算属性的函数。它可以根据依赖的响应式数据进行自动更新，并且具有缓存机制，只有当依赖的数据发生变化时，才会重新计算计算属性的值。使用c

vue3渲染器的设计 渲染器的作用是把虚拟 DOM 渲染为特定平台上的真实元素。在浏览器平台上，渲染器会把虚拟 DOM vdom渲染为真实 DOM 元素。 渲染器把虚拟 DOM 节点渲染为真实 DOM

虚拟 DOM 虚拟 DOM (Virtual DOM，简称 VDOM），是使用 Javascript 对象来描述 UI 的方式。这个对象会与真实的 DOM 保持同步，下面我会举个例子来说明： 上面的

已经完成了组件级别的渲染过程分析，组件最终会调用patch​函数，而 patch​ 函数会根据虚拟节点的类型进行不同处理。对于组件节点会递归处理其子组件，对于普通元素节点则会调用 processEle

Vue 中的样式隔离是通过 Vue 单文件组件（Single File Components，简称 SFC）的 ​ 标签中的 scoped​ 属性实现的。当你在一个 Vue 组件的 ​ 标签上添加 s

在使用Vue​的时候，最让人着迷的莫过于nextTick​了，它可以让我们在下一次DOM​更新循环结束之后执行延迟回调。 所以我们想要拿到更新的后的DOM​就上nextTick​，想要在DOM​更新之