vue3的响应式api – 国际web研究院

在 Vue 3 中，使用 Composition API 来创建组件时，可以使用 reactive、ref 和 computed 等响应式 API。

1.reactive函数

◆ Vue3 引入了一个 reactive() 方法，其行为类似于 ref()，但用于对象。

◆ reactive() 方法的作用是：为对象的属性增加响应性。在对象上调用 reactive()，就会得到一个代理对象，可以使用 watchEffect() 监听变化。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});

console.log(state.count); // 输出 0
console.log(state.message); // 输出 "Hello, Vue 3!"

//使用 reactive 函数将普通对象 state 转换为响应式对象。
//现在，无论何时更改 state 对象的属性，相关的依赖都会自动追踪和更新。

2.ref函数

◆ ref：用于将基本类型数据包装为响应式对象。

◆ ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
◆ ref 能定义任何类型的响应式数据，参数可以传入任意数据类型。对于基本数据类型，ref 通过value 属性设置 setter 和 getter 实现数据劫持，但它的原始数据不会发生更改，且性能优于 reactive。而对于引用类型，ref 仍然是通过 reactive 包装实现的；

◆ ref 定义的变量，改变值要 .value，而在 template 中不用写 .value；

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出 0

count.value++;
console.log(count.value); // 输出 1

//使用 ref 函数将基本类型数值 0 包装为响应式对象 count。通过访问 count.value 来获取和修改其值。

3.toRefs函数

◆ toRefs：将响应式对象转换为普通对象，以便在模板中访问响应式数据。

◆ toRefs 用于将响应式对象转换为普通对象，其中普通对象的每个属性都是指向原始对象相应属性的 ref，两者保持引用关系；

◆ toRefs 常用于 ES6 的解构赋值操作。但是，对一个响应式对象直接解构时，解构后的数据将不再有响应式，而使用 toRefs 可以方便解决这个问题；

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});

const stateRefs = toRefs(state);

export default {
  setup() {
    return {
      ...stateRefs
    };
  }
};

//将响应式对象 state 转换为普通对象 stateRefs，然后将其作为返回值传递给组件的 setup 函数。

4.toRef函数

◆ toRef：可用于为源 reactive 对象上的属性创建 ref。创建的 ref 与其源属性同步：改变源属性将更新 ref，反之亦然。

◆ toRef 接受两个参数：第一个参数为源对象，第二个参数为源对象中的属性名；
获取数据值的时候需要加 .value；
◆ 使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据；
◆ toRef 转化后生成的 ref 数据，如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据。

const state = reactive({
  foo: 1,
  bar: 2
})
 
const fooRef = toRef(state, 'foo')
 
fooRef.value++
console.log(state.foo) // 2
console.log(unref(fooRef)) // 2
state.foo++
console.log(unref(fooRef)) // 3

5.isReactive函数

◆ isReactive ：Vue 3 Composition API 中的一个函数，用于检查一个对象是否是响应式的,它接收一个对象作为参数，并返回一个布尔值，表示该对象是否是响应式的。。

◆ reactive 包装一个对象时，它会返回一个代理对象，该代理对象会跟踪对象的属性访问和修改，并在需要时触发相应的更新。

import { reactive, isReactive } from 'vue';

const obj = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});

console.log(isReactive(obj)); // 输出 true

6.总结

◆ ref、reactive是在 setup() 声明组件内部状态用的，这些变量通常都要 return 出去，除了供 < template > 或渲染函数渲染视图，也可以作为 props 或 emit 参数在组件间传递。它们的值变更可触发页面渲染；
◆ toRef、toRefs 用于处理组件/函数传递的响应式数据，如：在接收父组件 props 时composables 组合式函数返回数据时建立起某些属性的响应式引用；
◆ ref 包装的属性在 setup 函数内都需要通过 .value 去访问它值 ( template 模版内不用 )。因此，ref、toRef 创建的变量值都需要用变量 .value 读取。reactive 则不用，因为会自动解包分配给它的 ref。
◆ toRefs，如果是解构赋值，如： const { state1, state2 } = toRefs(props)，值需要这样获取：state1.value.count；
◆ 若整体赋给一个变量，如：const state = toRefs(props)，则是 state.state1.value。
只有 toRefs 可以解构；
以上四种方式声明的变量在通过 props 或事件传递时，均会维持其响应性。