vue3中的reactive、ref、toRef和toRefs-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中的reactive、ref、toRef和toRefs。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

reactive

reactive用于创建响应式对象，它返回一个对象的响应式代理。即：它返回的对象以及其中嵌套的对象都会通过 Proxy 包裹；当响应式对象被访问时，触发getter方法；当响应式对象被修改时，触发setter方法。在使用响应式对象时，我们可以像普通对象一样访问和修改数据。

使用reactive的示例代码

<template>
  <div> 
    {{ state.name }} --- {{ state.age }}
  </div>
</template>
<script setup> 
import { reactive } from 'vue';
const state = reactive({
  name: 'jack',
  age: 22
})
</script>
<style scoped>
</style>

reactive的实现原理

reactive是利用ES6的Proxy对象来实现的。当我们使用reactive函数对一个对象进行响应式处理时，Vue3会创建一个Proxy，拦截该对象的所有属性的读取和修改操作，从而实现监听属性的变化，并在变化时触发相关的响应式更新。

reactive实现原理的简单示意代码如下：

function reactive(obj) {
  if(typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 防止响应式重复包裹
  if(obj.__v_reactive) {
    return obj;
  }

  const observed = new Proxy(obj, {
    get(target, key, receiver) {
      // 收集依赖
      track(target, TrackOpTypes.GET, key);

      // 递归获取嵌套属性
      const res = Reflect.get(target, key, receiver);
      return isObject(res) ? reactive(res) : res;
    },
    set(target, key, value, receiver) {
      // 更新属性值
      const oldValue = Reflect.get(target, key, receiver);
      let result = true;
      if(oldValue !== value) {
        result = Reflect.set(target, key, value, receiver);
        // 触发更新
        trigger(target, TriggerOpTypes.SET, key, value, oldValue);
      }
      return result;
    },
    deleteProperty(target, key) {
      const hasKey = hasOwn(target, key);
      const oldValue = target[key];
      const result = Reflect.deleteProperty(target, key);
      if(hasKey && result) {
        // 触发更新
        trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue);
      }
      return result;
    }
  });

  // 标记为响应式对象
  observed.__v_reactive = true; 
  return observed;
}

上述代码中，reactive函数接收一个对象 obj，如果 obj 不是对象或为 null，返回原值。如果 obj 已经被处理为响应式，则直接返回该响应式对象。

使用reactive的注意事项

reactive只能处理对象和数组，如果传入非对象或数组的参数将会直接返回，不会进行响应式处理。
对于给定的对象，reactive将会递归收集其中所有子属性的依赖关系，因此在实际开发中，尽量不要嵌套过深，否则可能会影响性能。
reactive处理后的对象，不能直接用于解构赋值操作，建议采用Vue3提供的toRefs函数将响应式对象转换成普通对象后再进行操作。
在组件的setup函数中，需要使用ref或reactive对数据进行响应式处理后才能使用，在函数外部创建的响应式对象也必须在组件的setup函数中使用才能确保响应式生效。

ref

关于ref的相关特性，我在前面的博客中有讲过其用于注册元素或子组件的引用时的用法，这里就不在充分讲了，只对前面博客没有提到的响应式进行探讨。

ref 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。它将一个基本类型数据包装为响应式对象。

ref 对象是可更改的，我们可以通过 .value 属性来修改它的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

ref的实现原理

ref是基于基于Vue 3中的reactive和proxy两个API来实现的，proxy通过创建拦截器对象来在对象上设置自定义行为。它用于拦截对ref对象的读取和写入操作，以便在改变ref值时通知Vue响应式系统来更新视图。

ref实现原理的简单示意代码如下：

function ref(value) {
  return reactive({
    value,
    get unbox() {
      return this.value
    }
  })
}

在这里，我们通过将value作为响应式对象的一个属性，从而使得value变为响应式。同时，我们通过unbox属性提供了一个获取value的值的便捷方法。

使用ref的注意事项

ref只能用于包装简单类型的数据，如字符串、数字、布尔值等独立的基本数据类型，或者对象、数组、函数等引用类型的数据。不建议将ref用于包装复杂的嵌套数据结构，因为这会增加处理和维护的复杂性。
在组件内使用ref时，建议在setup()函数内创建ref成员变量，并在组件模板中使用模板引用（template refs）来引用它。
ref只能用于包装可变变量，不应用于包装不可变变量或常量，因为这样会导致无法更新变量的值。
在对ref对象进行操作时，应该使用.value属性来访问其内部的响应式值，而不是直接操作ref对象本身。
不要在ref对象上定义额外的属性或方法，因为这些属性和方法不会被响应式系统跟踪，也不会触发视图更新。如果需要在ref对象上定义属性或方法，应该使用reactive对象来包装它们。

toRef和toRefs

toRef和toRefs是vue中两个非常重要的工具函数。它们可以将一个响应式对象的属性，转换成一个Ref对象或者Ref对象集合，使得这些属性可以在组件中被使用。

toRef：toRef函数将响应式对象的其中一个属性转换成一个Ref对象。

toRef的一个简单示例

<template>
  <div> 
    {{ nameRef}} 
  </div>
</template>
<script setup>  
import { reactive, toRef } from 'vue'	
const state = reactive({
  name: 'Vue 3',
  version: '3.0.0'
})	
const nameRef = toRef(state, 'name')
</script>	
<style scoped>	
</style>

toRefs：toRefs函数将一个响应式对象的全部属性转换成Ref对象集合。

toRefs的一个简单示例

<template>
  <div> 
    {{ refs.name }} ---{{ refs.version }}
  </div>
</template>
<script setup>  
import { reactive, toRefs } from 'vue'

const state = reactive({
  name: 'Vue 3',
  version: '3.0.0'
})

const refs = toRefs(state)
</script>
<style scoped>
</style>

ref和reactive的使用比较

Ref和Reactive都是响应式对象。它们的区别在于：

Ref是一个基本类型的响应式容器，通过.value访问，适用于基本类型或者简单对象的响应式数据。

Reactive是一个对象级别的响应式容器，适用于复杂的对象或者数组的响应式数据。

下面是一个示例代码，展示了Ref和Reactive的区别和使用场景：

<template>
  <div> 
    {{ count }} ---{{ doubleCount }} <br>
    {{ state.count }} ---{{ state.doubleCount }}
  </div>
</template>
<script setup>  
import { ref, reactive,watch } from 'vue'
// 1. Ref示例代码
const count = ref(0)
const doubleCount = ref(0)
watch(count, () => {
  doubleCount.value = count.value * 2
})
// 2. Reactive示例代码
const state = reactive({
  count: 0,
  doubleCount: 0
})
watch(() => state.count, () => {
  state.doubleCount = state.count * 2
})
</script>
<style scoped>
</style>