10.JS学习篇-vue3响应式实现原理

在 Vue 3 中，响应式系统的实现原理主要基于 ES2015 的 Proxy（代理）对象。

1.Proxy 对象简介

Proxy 对象允许你创建一个代理对象，该对象可以拦截并自定义对目标对象的各种操作，如属性访问、赋值、枚举等。它提供了一种强大的方式来实现对象的行为控制和扩展。

2.Vue 3 响应式的核心概念

1.reactive 函数

• reactive 函数用于创建响应式对象。它接受一个普通的 JavaScript 对象作为参数，并返回一个代理对象。
• 当对代理对象的属性进行读取、赋值或其他操作时，Vue 3 的响应式系统会自动追踪这些操作，并在相关的依赖项发生变化时触发更新。

2. 依赖收集和触发更新

• Vue 3 的响应式系统通过依赖收集和触发更新的机制来实现数据的自动更新。
• 当一个响应式对象的属性被读取时，会收集当前正在执行的副作用函数（如计算属性、侦听器、组件渲染函数等）作为依赖。
• 当响应式对象的属性被赋值时，会触发所有收集到的依赖，从而执行相应的副作用函数，实现数据的自动更新。

3.响应式实现的具体步骤

1.创建响应式对象

• 当调用 reactive 函数时，Vue 3 会创建一个代理对象，并将原始对象作为目标对象传递给 Proxy。
• 代理对象会拦截对目标对象的各种操作，并执行相应的逻辑。

2.拦截属性访问

• 当读取代理对象的属性时，Proxy 会拦截这个操作，并执行依赖收集的逻辑。
• 如果当前正在执行一个副作用函数，会将该函数收集为当前属性的依赖。

3.拦截属性赋值

• 当对代理对象的属性进行赋值时，Proxy 会拦截这个操作，并执行触发更新的逻辑。
• 首先，会更新目标对象的相应属性值。然后，会遍历所有收集到的依赖，并执行这些依赖函数，实现数据的自动更新。

4.依赖收集的实现

• Vue 3 使用一个全局的依赖收集器来管理所有的依赖。
• 当读取响应式对象的属性时，会将当前正在执行的副作用函数添加到相应属性的依赖列表中。
• 依赖收集器会维护一个栈结构，用于跟踪当前正在执行的副作用函数的嵌套关系。

5.触发更新的实现

• 当响应式对象的属性被赋值时，会遍历该属性的依赖列表，并执行所有的依赖函数。
• 执行依赖函数会触发相应的副作用，如重新计算计算属性、执行侦听器函数、重新渲染组件等。

4.优势和特点

1.性能优化

• Vue 3 的响应式系统通过使用 Proxy 对象，实现了更高效的依赖收集和触发更新机制。
• 与 Vue 2 相比，Vue 3 在处理大型数据结构和频繁更新的场景下具有更好的性能表现。

2.更好的类型支持

• Proxy 对象可以拦截对对象的各种操作，包括对对象属性的添加、删除和枚举等。这使得 Vue 3 的响应式系统能够更好地支持各种类型的对象和数据结构。

3.更灵活的响应式控制

• 通过 Proxy 对象，Vue 3 的响应式系统可以更灵活地控制对对象的访问和修改。
• 可以实现自定义的拦截逻辑，如只读属性、深度响应式等功能。

总之，Vue 3 的响应式系统基于 Proxy 对象实现，通过依赖收集和触发更新的机制，实现了数据的自动更新和高效的性能表现。这种响应式实现原理使得 Vue 3 在开发复杂的前端应用时更加灵活、高效和易于维护。

5.如何使用 Vue 3 的响应式系统

1.使用reactive创建响应式对象

1.导入reactive函数

import { reactive } from 'vue';

2.创建响应式对象

const state = reactive({
     count: 0,
     message: 'Hello Vue 3!',
   });
// 现在state对象是响应式的，对其属性的修改会触发相关的更新。

2.在组件中使用响应式数据

1. 在setup函数中使用响应式数据

   <script>
      import { reactive } from 'vue';
   
      export default {
        setup() {
          const state = reactive({
            count: 0,
          });
   
          const increment = () => {
            state.count++;
          };
   
          return {
            state,
            increment,
          };
        },
      };
      </script>

2. 在模板中访问响应式数据

   <template>
        <div>
          Count: {{ state.count }}
          <button @click="increment">Increment</button>
        </div>
      </template>

3.使用ref创建响应式的单个值

1. 导入ref函数

   import { ref } from 'vue';

2. 创建响应式的单个值

   const count = ref(0);

3. 在组件中使用

   <script>
      import { ref } from 'vue';
   
      export default {
        setup() {
          const count = ref(0);
   
          const increment = () => {
            count.value++;
          };
   
          return {
            count,
            increment,
          };
        },
      };
      </script>

4.响应式计算属性

1. 在setup函数中使用计算属性

   <script>
      import { reactive, computed } from 'vue';
   
      export default {
        setup() {
          const state = reactive({
            count: 0,
          });
   
          const doubleCount = computed(() => state.count * 2);
   
          return {
            state,
            doubleCount,
          };
        },
      };
      </script>

2. 在模板中访问计算属性

   <template>
        <div>
          Count: {{ state.count }}
          Double Count: {{ doubleCount }}
        </div>
      </template>

5.侦听器（Watchers）

1. 创建侦听器

   <script>
      import { reactive, watch } from 'vue';
   
      export default {
        setup() {
          const state = reactive({
            count: 0,
          });
   
          watch(
            () => state.count,
            (newValue, oldValue) => {
              console.log(`Count changed from ${oldValue} to ${newValue}`);
            }
          );
   
          return {
            state,
          };
        },
      };
      </script>