文章目录
- 一、响应式系统基础
- 什么是响应式系统
- 响应式数据的声明与使用
- 二、响应式原理深入
- Object.defineProperty () 方法的应用（Vue2）
- Proxy 对象的应用（Vue3）
- 三、响应式接口之 ref 和 reactive（Vue3）
- ref 函数的使用
- reactive 函数的使用
- 四、计算属性（computed）作为响应式接口
- 计算属性的基本原理
- 计算属性的缓存机制
- 五、侦听器（watch）作为响应式接口
- 侦听器的基本用法
- 深度侦听与立即执行
- 六、响应式接口在组件通信中的应用
- 父子组件通信
- 非父子组件通信（使用事件总线或 Vuex）
一、响应式系统基础
什么是响应式系统
在 Vue.js 中，响应式系统是核心特性之一。它能够自动追踪数据的变化，并在数据变化时更新与之绑定的 DOM 元素。这使得开发者可以专注于数据和业务逻辑，而不必手动操作 DOM 来更新视图。例如，当一个 Vue 实例中的数据属性发生变化时，与这个数据属性绑定的 HTML 模板中的内容会自动更新，保持数据和视图的同步。
响应式数据的声明与使用
声明响应式数据： 在 Vue.js 组件或实例中，通过data选项来声明响应式数据。例如：
new Vue({
