logo

新编程学习网
详细讲解vue3中的ref和reactive
首页>内容详情

详细讲解vue3中的ref和reactive

大熊••前端,JavaScript

使用ref包装一个对象

在 Vue3 中，使用 ref 包装一个对象时，ref 会返回一个包含 value 属性的对象,这个 value 属性指向你传递的对象。
具体来说，ref 对象的结构如下：

用法详解

基本用法

import { ref } from 'vue';

const user = ref({ name: 'Alice', age: 25 });
console.log(user);

打印结果

当你打印 user 时，输出结果会类似于以下内容：

{
  __v_isRef: true,
  _rawValue: { name: 'Alice', age: 25 },
  _shallow: false,
  _value: Proxy { name: 'Alice', age: 25 },
  value: Proxy { name: 'Alice', age: 25 }
}

详细解释

  • __v_isRef: 一个布尔值，表示这是一个 ref 对象。
  • _rawValue: 原始值，即你传递给 ref 的对象。
  • _shallow: 一个布尔值，表示是否是浅层响应式。默认情况下，ref 是深层响应式的。
  • _value: 一个 Proxy 对象，用于拦截对对象属性的访问和修改，从而实现响应式。
  • value: 一个 Proxy 对象，与 _value 相同，用于访问和修改对象的属性。

示例代码

import { ref } from 'vue';

const user = ref({ name: 'Alice', age: 25 });

console.log(user);
// 输出:
// {
//   __v_isRef: true,
//   _rawValue: { name: 'Alice', age: 25 },
//   _shallow: false,
//   _value: Proxy { name: 'Alice', age: 25 },
//   value: Proxy { name: 'Alice', age: 25 }
// }

console.log(user.value);
// 输出:
// Proxy { name: 'Alice', age: 25 }

注意事项

  • 访问对象属性：
  1. 通过 user.value 访问对象的属性，例如 user.value.name。
  2. 直接访问 user.name 会返回 undefined，因为 user 是一个 ref 对象，而不是原始对象。
  • 修改对象属性：
  1. 通过 user.value 修改对象的属性，例如 user.value.age = 26。
  2. 这会触发响应式更新，视图会自动更新。

总结

  • ref 包装一个对象时，返回一个包含 value 属性的对象。
  • value 属性是一个 Proxy 对象，用于实现响应式。
  • 打印 ref 对象时，可以看到 __v_isRef、_rawValue、_shallow、_value 和 value 等属性。

使用ref创建一个引用对象

在 Vue3 中，ref 函数用于创建一个响应式引用对象，其核心原理是通过 Proxy 对象来拦截对 value 属性的访问和修改，从而实现响应式。

以下是为什么 ref 要加上 value 属性的详细解释：

基本用法:

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

为什么需要 value 属性:

  1. 统一响应式接口：
  • ref 和 reactive 是 Vue3 中两种不同的响应式创建方式。
  • ref 用于包装基本类型（如 number、string、boolean）和对象。
  • reactive 仅用于包装对象。
  • 通过 value 属性，ref 提供了一个统一的接口来访问和修改响应式数据，无论数据是基本类型还是对象。
  1. 基本类型包装：
  • 基本类型（如 number、string、boolean）是不可变的，不能直接通过 Proxy 变为响应式。
  • 通过 ref 包装基本类型，将其包装在一个对象中，并通过 value 属性来访问和修改。

例如:

const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
  1. 对象包装：
  • 对于对象，ref 会将对象包装在一个 Proxy 对象中，并通过 value 属性来访问和修改。

例如：

const user = ref({ name: 'Alice', age: 25 });
console.log(user.value.name); // 'Alice'
user.value.age = 26;
console.log(user.value.age); // 26
  1. 依赖收集和触发更新：
  • ref 通过 Proxy 拦截对 value 属性的访问和修改。
  • 当访问 value 属性时，会收集依赖（即当前正在执行的计算属性或组件的渲染函数）。
  • 当修改 value 属性时，会触发所有依赖的更新。

例如：

import { ref, effect } from 'vue';
const count = ref(0);
effect(() => {
  console.log(count.value); // 0
});
count.value++; // 1

伪代码解释

以下是一个简化的伪代码，模拟 ref 的工作原理，包括 value 属性的使用：

class RefImpl {
  constructor(value) {
    this._value = value;
    this._deps = new Set();
  }

  get value() {
    track(this);
    return this._value;
  }

  set value(newValue) {
    if (newValue !== this._value) {
      this._value = newValue;
      trigger(this);
    }
  }
}

let activeEffect = null;

function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn;
    fn();
    activeEffect = null;
  };
  effectFn();
}

function track(target) {
  if (activeEffect) {
    target._deps.add(activeEffect);
    activeEffect.deps.add(target);
  }
}

function trigger(target) {
  for (const effect of target._deps) {
    effect();
  }
}

// 示例使用
const count = new RefImpl(0);

effect(() => {
  console.log(count.value); // 0
});

count.value++; // 1

详细步骤

  1. 创建 RefImpl 对象：
  • RefImpl 类接收一个初始值，并初始化一个依赖集合 _deps。
  • value 属性用于访问和修改响应式数据。
  1. 访问 value 属性：
  • 当访问 value 属性时，track 方法会被调用。
  • track 方法会收集当前的活动依赖（activeEffect），并将这些依赖添加到 _deps 集合中。
  1. 修改 value 属性：
  • 当修改 value 属性时，trigger 方法会被调用。
  • trigger 方法会遍历 _deps 集合中的所有依赖，并调用它们的 run 方法，从而触发更新。
  1. 依赖收集：
  • effect 函数用于创建一个依赖（effectFn），并在执行 fn 时将 effectFn 设置为当前的活动依赖。
  • getActiveEffect 函数用于获取当前的活动依赖。

使用ref用于基本数据类型

在 Vue3 中，ref 用于将基本类型（如 number、string、boolean）和对象转换为响应式数据。对于基本类型，直接通过 Proxy 无法使其变为响应式，原因如下：

基本类型的特点

  1. 不可变性：

基本类型（如 number、string、boolean）是不可变的。当你修改一个基本类型时，实际上是创建了一个新的值，而不是修改原来的值。

例如：

let count = 0;
count = 1; // 创建了一个新的值 1，而不是修改原来的 0
  1. 没有属性：

基本类型没有属性，Proxy 主要用于拦截对象属性的访问和修改。

例如：

const count = 0;
console.log(count.someProperty); // undefined

为什么不能直接通过 Proxy 变为响应式?

  1. 拦截机制：
  • Proxy 通过拦截对象的 get 和 set 操作来实现响应式。
  • 由于基本类型没有属性，Proxy 没有可拦截的操作点。

例如：

const count = new Proxy(0, {
  get(target, prop) {
    console.log('get', prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('set', prop, value);
    target[prop] = value;
    return true;
  }
});

console.log(count); // 0
count = 1; // 这里并没有触发 Proxy 的 set 拦截
  1. 依赖收集和触发更新：
  • 响应式系统需要在访问和修改数据时收集依赖并触发更新。
  • 对于基本类型，没有属性访问和修改的操作，因此无法收集依赖和触发更新。

例如：

let count = 0;
effect(() => {
  console.log(count); // 0
});

count = 1; // 这里没有触发依赖收集和更新

reactive 函数创建的响应式对象

在 Vue3 中，使用 reactive 函数创建的响应式对象是一个 Proxy 对象。当你打印这个对象时，会看到 Proxy 对象的结构。以下是详细的打印结果和解释。

基本用法

import { reactive } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });
console.log(user);

打印结果

当你在浏览器控制台中打印 user 时，输出结果会类似于以下内容：

Proxy { name: 'Alice', age: 25 }

详细解释

  1. Proxy 对象:
  • reactive 返回的是一个 Proxy 对象，用于拦截对对象属性的访问和修改，从而实现响应式。
  • 这个 Proxy 对象具有与原始对象相同的属性，但这些属性是响应式的。
  1. 内部结构:
  • reactive 内部使用 Proxy 来包装原始对象，拦截对属性的 get 和 set 操作。
  • 当访问或修改属性时，Proxy 会自动收集依赖并触发更新。

示例代码

import { reactive } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });

console.log(user);
// 输出:
// Proxy { name: 'Alice', age: 25 }

console.log(user.name); // 'Alice'
console.log(user.age);  // 25

打印详细信息

如果你希望查看 reactive 对象的更多详细信息，可以使用 console.dir 或其他调试工具。例如：

console.dir(user, { depth: null });

这将显示 Proxy 对象的内部结构和属性。

控制台输出示例

在浏览器控制台中，console.log(user) 的输出可能如下所示：

Proxy { name: 'Alice', age: 25 }
  [[Handler]]: Object
  [[Target]]: Object
    age: 25
    name: "Alice"
  [[IsRevoked]]: false

注意事项

  1. 访问和修改属性:
  • 通过 user.name 和 user.age 直接访问和修改属性。
  • 这些操作会触发响应式更新，视图会自动更新。
  1. 嵌套对象:
  • reactive 是深层响应式的，嵌套对象也会被转换为响应式对象。

例如：

const user = reactive({
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zip: '12345'
  }
});

console.log(user.address); // Proxy { city: 'Wonderland', zip: '12345' }

总结

  1. reactive 返回的是一个 Proxy 对象，用于实现响应式。
  2. 打印 reactive 对象时，会看到 Proxy 对象及其属性。
  3. 通过 Proxy 对象，可以实现对对象属性的拦截和响应式更新。

设计原理

直接在 reactive 中加上 value 属性来支持基本类型虽然在某些情况下可以简化使用方式，但会带来一系列复杂性和潜在的问题。

以下是详细解释为什么这样做不可行以及可能的解决方案：

1. 设计哲学和一致性

  • 对象 vs 基本类型：
  1. reactive 设计用于处理对象，因为它依赖于对象的属性结构来实现响应式。
  2. ref 设计用于处理基本类型，通过包装对象和 value 属性来实现响应式。
  3. 统一接口会导致逻辑复杂化，并且在使用上不够直观。
  • 一致性：

reactive 和 ref 提供了清晰的区分，使得开发者可以根据数据类型选择合适的方法。

例如：

const state = reactive({
  count: 0,
  name: 'Vue'
});

const count = ref(0);

2. 性能考虑

  • 对象响应式：
    reactive 使用 Proxy 来拦截对象的属性访问和修改，适用于对象结构的数据。
    例如：
const state = reactive({
  count: 0
});

effect(() => {
  console.log(state.count); // 0
});

state.count++; // 1
  • 基本类型响应式：

如果 reactive 直接支持基本类型，需要额外的逻辑来处理基本类型的不可变性和响应式更新。

例如：

const count = reactive(0); // 假设支持基本类型
effect(() => {
  console.log(count.value); // 0
});
count.value = 1; // 需要额外逻辑来处理响应式更新

3. 不可变性和内存管理

  • 基本类型的不可变性：
    基本类型是不可变的，修改基本类型会创建新的值，而不是修改原来的值。

例如：

let count = 0;
count = 1; // 创建了一个新的值 1，而不是修改原来的 0
  • 内存管理：
    基本类型在内存中以值的形式存储，而不是引用。
    例如：
let a = 10;
let b = a; // b 复制了 a 的值 10
b = 20;    // b 被赋值为 20，但 a 仍然是 10

4. 实现复杂性

  • 额外逻辑：

如果 reactive 直接支持基本类型，需要额外的逻辑来处理基本类型的不可变性和响应式更新。

例如：

class Reactive {
  constructor(value) {
    if (typeof value === 'object' && value !== null) {
      this._value = new Proxy(value, {
        get(target, prop) {
          track(target, prop);
          return target[prop];
        },
        set(target, prop, newValue) {
          target[prop] = newValue;
          trigger(target, prop);
          return true;
        }
      });
    } else {
      this._value = { value: value };
      this._deps = new Set();
    }
  }

  get value() {
    if (typeof this._value === 'object' && this._value !== null) {
      return this._value;
    }
    track(this);
    return this._value.value;
  }

  set value(newValue) {
    if (typeof this._value === 'object' && this._value !== null) {
      throw new Error('Cannot set value on an object');
    }
    if (newValue !== this._value.value) {
      this._value.value = newValue;
      trigger(this);
    }
  }
}
  • 代码复杂性：

这种实现方式会增加代码的复杂性，并且可能导致性能问题。
例如：

const count = new Reactive(0);
effect(() => {
  console.log(count.value); // 0
});
count.value = 1; // 1

5. 使用场景

对象响应式：reactive 适用于对象结构的数据，可以递归地将对象的所有属性转换为响应式。

例如：

const state = reactive({
  nested: {
    count: 0
  }
});
  • 基本类型响应式：

ref 适用于基本类型，通过包装对象和 value 属性来实现响应式。

例如：

const count = ref(0);
console.log(count.value); // 0
count.value++; // 1

6. 简化逻辑

统一接口：ref 提供统一的接口来处理基本类型和对象类型，使得使用方式一致。

例如：

const count = ref(0);
const state = reactive({
  count: 0
});

effect(() => {
  console.log(count.value); // 0
  console.log(state.count); // 0
});

count.value++; // 1
state.count++; // 1

7. 潜在问题

  • 类型不一致：

如果 reactive 直接支持基本类型，会导致类型不一致的问题。

例如：

const count = reactive(0);
const state = reactive({
  count: 0
});

console.log(typeof count); // object
console.log(typeof state); // object
  • 访问方式不一致：

使用 value 属性访问基本类型会导致访问方式不一致。

例如：

const count = reactive(0);
const state = reactive({
  count: 0
});

console.log(count.value); // 0
console.log(state.count); // 0

8. 解决方案

如果确实希望简化使用方式，可以考虑以下解决方案：

  • 自定义封装：
    创建一个自定义函数来处理基本类型和对象类型。

例如：

function createReactive(value) {
  if (typeof value === 'object' && value !== null) {
    return reactive(value);
  } else {
    return ref(value);
  }
}

const count = createReactive(0);
const state = createReactive({
  count: 0
});

effect(() => {
  console.log(count.value); // 0
  console.log(state.count); // 0
});

count.value++; // 1
state.count++; // 1
  • 使用 ref 包装对象：

使用 ref 包装对象，使其具有 value 属性。

例如：

const state = ref({
  count: 0,
  name: 'Vue'
});

effect(() => {
  console.log(state.value.count); // 0
  console.log(state.value.name);  // Vue
});

state.value.count++; // 1

总结

  • 设计哲学：reactive 和 ref 提供了清晰的区分，使得开发者可以根据数据类型选择合适的方法。
  • 性能考虑：reactive 依赖于对象的属性结构，直接支持基本类型会增加额外的逻辑和复杂性。
  • 不可变性和内存管理：基本类型是不可变的，修改基本类型会创建新的值，reactive 无法直接处理。
  • 实现复杂性：直接在 reactive 中支持基本类型会增加代码复杂性和潜在的性能问题。
  • 使用场景：reactive 适用于对象结构的数据，ref 适用于基本类型，提供统一的接口和一致的使用方式。

通过这种方式，Vue3 提供了灵活且一致的响应式系统，适用于不同类型的数据。如果确实希望简化使用方式，可以考虑自定义封装或使用 ref 包装对象。

关于我
loading
下一篇：无
在线编辑器

Copyright © 2024 编程学习网，帮助新手快速入门，高级编程的工具箱。  版权所有 ICP证：京ICP备15048378号-3联系作者