vue3-ref 和 reactive

文章目录

• • [vue3 中 ref 和 reactive](#vue3 中 ref 和 reactive)
  • [reactive 与 ref 不同之处](#reactive 与 ref 不同之处)
  • [ref 处理复杂类型](#ref 处理复杂类型)
  • ref在dom中的应用

vue3 中 ref 和 reactive

1. ref原理
   • 基本原理
     • ref是Vue 3中用于创建响应式数据的一个函数。它的基本原理是通过Object.defineProperty()（在JavaScript的规范中用于定义对象属性的方法）或者Proxy（ES6新特性，用于创建对象的代理）来实现数据的响应式。当数据被修改时，它会触发更新相关的副作用函数（例如更新DOM等操作）。
     • 当使用ref创建一个响应式数据时，它实际上返回一个包含value属性的对象。例如，const count = ref(0)，这里的count是一个对象，访问和修改数据需要通过count.value。
   • 底层实现细节（简单示例）
     • 以下是一个简单的模拟ref实现的代码（简化版，实际Vue 3代码更复杂）：

function ref(raw) {
    const r = {
        get value() {
            track(r, 'value');
            return raw;
        },
        set value(newVal) {
            if (newVal!== raw) {
                raw = newVal;
                trigger(r, 'value');
            }
        }
    };
    return r;
}

• 这里的track函数用于收集依赖（记录哪些函数依赖了这个ref数据），trigger函数用于触发更新（当数据改变时，通知依赖的函数重新执行）。

2. reactive原理
   • 基本原理
     • reactive是基于Proxy对象来实现响应式的。Proxy可以拦截对目标对象的各种操作，如读取属性、设置属性、删除属性等。当这些操作发生时，reactive可以触发相应的更新逻辑。
     • 例如，const state = reactive({ count: 0 })，对state.count的读取和修改都会被Proxy拦截，从而实现响应式。
   • 底层实现细节（简单示例）
     • 以下是一个简单的模拟reactive实现的代码片段（简化版）：

function reactive(target) {
    return new Proxy(target, {
        get(target, key, receiver) {
            track(target, key);
            return Reflect.get(target, key, receiver);
        },
        set(target, key, value, receiver) {
            const result = Reflect.set(target, key, value, receiver);
            trigger(target, key);
            return result;
        }
    });
}

• 同样，这里的track和trigger函数用于收集依赖和触发更新，和ref的原理类似，但是reactive是针对整个对象的属性进行拦截。

3. ref和reactive的应用场景

   • ref应用场景
     • 基本数据类型 ：当处理基本数据类型（如number、string、boolean）的响应式数据时，通常使用ref。例如，一个计数器const count = ref(0)，这里count是一个ref对象，通过count.value来访问和修改计数值。
     • 在组合式API中传递单个数据 ：如果在组合式API函数之间传递一个简单的响应式数据，ref是一个很好的选择。比如一个函数返回一个ref数据，另一个函数可以接收并使用这个ref。
   • reactive应用场景
     • 复杂对象类型 ：对于复杂的对象（如包含多个属性的对象或数组），使用reactive更为合适。例如，const state = reactive({ name: 'John', age: 30, hobbies: ['reading', 'coding']})，对state对象中的任何属性的访问和修改都会是响应式的。
     • 多个相关数据的管理 ：当需要管理一组相关的数据并且希望它们作为一个整体进行响应式处理时，reactive是首选。比如一个表单数据对象，包含表单的各个字段值，使用reactive可以方便地处理整个表单数据的更新和响应。

4. 应用要求/依据

   • 响应式数据的修改原则
     • 对于ref，必须通过.value属性来修改数据才能触发响应式更新。例如，count.value++会触发更新，而直接count = new_value（这里count是ref）不会触发响应式更新。
     • 对于reactive，直接修改对象的属性就可以触发响应式更新。如state.name = 'Jane'（这里state是reactive对象）会触发更新。
   • 模板中的使用差异
     • 在Vue 3的模板中，ref的数据可以直接在模板中使用，不需要额外的.value语法。例如，<div>{``{ count }}</div>（这里count是ref）是可以正常工作的，Vue会自动处理value属性的访问。而对于reactive对象，直接通过属性访问即可，如<div>{``{ state.name }}</div>（这里state是reactive对象）。

reactive 与 ref 不同之处

1. 数据类型处理方式不同
   • ref
     • 主要用于包装基本数据类型（如number、string、boolean），使其具有响应式特性。例如const count = ref(0)，count是一个对象，它有一个value属性来存储实际的数据。在JavaScript代码中，必须通过count.value来访问和修改这个数据。
   • reactive
     • 用于处理复杂的对象类型（如对象字面量或数组），它会递归地将对象的所有属性转换为响应式。例如const state = reactive({ count: 0, message: 'Hello'})，state本身就是响应式对象，对state.count和state.message等属性的访问和修改都是响应式的，不需要像ref那样通过特定的value属性来操作。
2. 在模板中的使用差异
   • ref
     • 在Vue 3模板中使用ref时，不需要显式地访问value属性。Vue会自动进行解包，例如，如果count是一个ref，在模板中可以直接写成<div>{``{ count }}</div>，它会正确地渲染count.value的值。
   • reactive
     • 对于reactive对象，在模板中直接通过属性访问来使用。如const state = reactive({ name: 'John'})，在模板中可以写成<div>{``{ state.name }}</div>来显示name属性的值。
3. 响应式转换的深度不同
   • ref
     • 只对它包装的那个数据本身进行响应式处理。如果ref包装了一个对象，它不会自动将对象内部的属性也转换为响应式，仍然需要通过value属性来访问对象，并且如果要使对象内部属性具有响应式，可能还需要进一步的处理（如使用reactive来处理这个对象）。
   • reactive
     • 是深度响应式的。当使用reactive处理一个对象时，它不仅会使对象本身的属性具有响应式，还会递归地将对象内部嵌套的对象和数组的属性也转换为响应式。例如，如果有一个对象const user = reactive({ name: 'Alice', address: { city: 'New York', street: '123 Main St' }})，那么user.address.city的访问和修改也是响应式的。
4. 创建和使用的语法及场景差异
   • ref
     • 创建语法简单直接，适用于单个数据值的响应式处理，特别是基本数据类型。在组合式API中，当需要从一个函数返回一个响应式数据，并且这个数据是基本类型或者只需要简单的包装时，ref是很好的选择。
   • reactive
     • 创建时需要传入一个对象，更适合处理复杂的、有多个相关属性的数据结构，如应用程序中的状态对象。当有一组相关的数据需要作为一个整体进行响应式管理时，如表单数据、应用的全局状态等，reactive是更合适的方式。

ref 处理复杂类型

1. ref处理复杂类型

   • 从功能上来说，ref可以用来包装复杂的数据类型，如对象或数组。例如，可以使用ref创建一个包含多个属性的对象，const myObject = ref({name: 'John', age: 30})。

2. 限制

   • 访问方式的限制
     • 在JavaScript代码中，必须通过value属性来访问和修改包装后的复杂对象。例如，要访问上述myObject中的name属性，需要使用myObject.value.name。这与reactive不同，reactive可以直接通过属性访问（如const myReactiveObject = reactive({name: 'Alice'}); myReactiveObject.name）。这种访问方式的差异可能会导致代码不够简洁直观，尤其是在处理多层嵌套的复杂对象时。
   • 响应式转换深度的限制
     • ref本身不会对包装的复杂对象内部进行深度的响应式转换。例如，如果有一个ref包装的对象const user = ref({name: 'Bob', address: {city: 'New York'}})，修改user.value.address.city不会自动触发响应式更新，除非address这个对象本身也经过了响应式处理（如使用reactive来处理address对象）。而reactive会自动对对象内部进行深度响应式处理。
   • 在模板中的限制（部分）
     • 在Vue 3的模板中，ref包装的复杂对象在某些情况下可能会引起混淆。虽然Vue会自动展开ref的值，但对于复杂对象的属性访问，有时候可能需要注意绑定的语法。例如，如果要在模板中使用myObject中的name属性，写成{``{myObject.name}}是不行的，需要写成{``{myObject.value.name}}，不过Vue在模板渲染时会自动处理ref的value属性，使得在大多数简单情况下可以像使用普通数据一样使用ref包装的数据。但在复杂的模板绑定场景下，还是要注意正确的语法。

ref在dom中的应用

1. 应用实例
   • 基本计数器示例
     • 在Vue 3组件中，可以使用ref来获取DOM元素，并对其进行操作。以下是一个简单的计数器组件，当点击按钮时，计数器的值会增加，并且会更新DOM中的显示内容。

<template>
  <div>
    <p ref="counterDisplay">{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const count = ref(0);
    const counterDisplay = ref(null);
    const increment = () => {
      count.value++;
      if (counterDisplay.value) {
        // 直接操作DOM元素的文本内容
        counterDisplay.value.textContent = count.value;
      }
    };
    return {
      count,
      counterDisplay,
      increment
    };
  }
});
</script>

• 表单验证示例
  • 假设有一个简单的表单，通过ref获取表单元素，用于检查表单是否有效。

<template>
  <form ref="myForm">
    <input type="text" v-model="username">
    <button @click="checkFormValidity">Check Validity</button>
  </form>
</template>

<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const username = ref('');
    const myForm = ref(null);
    const checkFormValidity = () => {
      if (myForm.value) {
        const isFormValid = myForm.value.checkValidity();
        console.log('Form is valid:', isFormValid);
      }
    };
    return {
      username,
      myForm,
      checkFormValidity
    };
  }
});
</script>

2. 原理
   • 挂载阶段（mounted）
     • 当组件被挂载时，ref对应的DOM元素会被赋值。在Vue 3中，组件的setup函数执行过程中，ref初始化为null。然后，在组件的生命周期钩子（如onMounted）或者在模板渲染完成后（实际上是Vue内部的渲染机制），ref会被正确地赋值为对应的DOM元素。这是因为Vue在渲染过程中会遍历模板，识别出带有ref属性的DOM元素，并将其与对应的ref变量关联起来。
   • 更新阶段（update）
     • 当组件的状态发生变化（如count的值改变）并导致DOM需要更新时，Vue会重新渲染模板。在这个过程中，ref变量仍然保持对相应DOM元素的引用。如果在setup函数中有对ref变量所引用的DOM元素进行操作的代码（如修改textContent），这些操作会在DOM更新完成后或者在适当的时机（由Vue的响应式更新机制决定）执行。
   • 响应式原理关联
     • ref用于操作DOM元素也与Vue的响应式原理相关。当一个ref变量（如count）的值发生变化时，Vue会触发组件的重新渲染。在重新渲染过程中，其他与ref相关的操作（如操作counterDisplay所引用的DOM元素）可以利用这个更新时机来实现对DOM的动态操作。同时，ref本身的更新机制（通过value属性访问和修改）也保证了操作的一致性和可追踪性，使得在组件的整个生命周期内能够正确地对DOM进行操作。