在平时的开发工作中，我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑。

上一篇文章，我们学习了响应式的实现原理，这次我们将学习一个非常常用的响应式 API——计算属性。

上一节课我们学习了 Composition API 的核心 setup 函数的实现，在 setup 函数中，我们多次使用一些 API 让数据变成响应式，那么这节课我们就来深入学习响应式内部的实现原理。

Vue.js 3.0 允许我们在编写组件的时候添加一个 setup 启动函数，它是 Composition API 逻辑组织的入口，我们这就来分析一下这个函数。

下面我们来继续讲解上节课提到的核心 diff 算法。

上一节课我们梳理了组件渲染的过程，本质上就是把各种类型的 vnode 渲染成真实 DOM。我们也知道了组件是由模板、组件描述对象和数据构成的，数据的变化会影响组件的变化。组件的渲染过程中创建了一个带副作用的渲染函数，当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来，我们就具体分析一下组件的更新过程。

在 Vue.js 中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染来实现的，但是你知道当我们编写这些组件的时候，它的内部是如何工作的吗？从我们编写组件开始，到最终真实的 DOM 又是怎样的一个转变过程呢？这节课，我们将会学习 Vue.js 3.0 中的组件是如何渲染的，通过学习，你的这些问题将会迎刃而解。

Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。

TypeScript 类型体操姿势合集记录 type-challenges/README.zh-CN.md at main · type-challenges/type-challenges (github.com)

在 Vue 中，响应式系统采取的是发布订阅的模式，Vue2 中主要依赖 ES5 Object.defineProperty 的 API，在 vue3 中重写了响应式系统，使用的是 ES6 Proxy Reflect，在它们不受支持的情况下会降级使用 Object.defineProperty。今天我们来实现一个极其简易版的响应式系统。