[vue3] Ref Reactive

【b站-【前端面试】Vue3 ref 与 reactive 区别】

Ref：Ref用于创建一个响应式的基本数据类型，比如数字、字符串等。它将普通的数据变成响应式数据，可以监听数据的变化。使用Ref时，我们可以通过.value来访问和修改数据的值。

Reactive：Reactive则用于创建一个响应式对象，可以包含多个属性。通过Reactive，我们可以将整个对象变成响应式，使对象的任何属性发生变化时都能被检测到。

Ref

ref 接受的数据类型：基本类型，引用类型。
作用：把参数加工成一个响应式对象，全称为reference对象(简称为ref对象) 。
核心原理：
如果参数是基本类型, 那么形成响应式依赖于Object.defineProperty( )的get( )和set( )，
如果ref的参数是引用类型，底层ref会借助reactive的proxy 定义响应式变成这样：reactive({value:‘value’})。

import { ref } from 'vue'// 为基本数据类型添加响应式状态
const name = ref('Neo')// 为复杂数据类型添加响应式状态
const state = ref({count: 0
})// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

可以在setup()函数中使用，管理简单的数据状态。

import { ref } from 'vue';export default {setup() {const count = ref(0);return {count};}
};

在Vue3中，<script setup>语法是一种简洁的写法，可以在单文件组件中更便捷地使用ref。

<script setup>
import { ref } from 'vue';const count = ref(0);
</script>

Reactive

在Vue3中，Reactive用于创建一个响应式对象，使对象的属性发生变化时能够被检测到。通过reactive()函数创建一个响应式对象，对象的所有属性都变成响应式

原理：它的响应式是更加‘深层次’的（会影响对象内部所有嵌套的属性，所有的数据都是响应式的），底层本质是将传入的数据包装成一个 Proxy

参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用 toRefs 函数处理

import { reactive } from 'vue';const user = reactive({name: 'Alice',age: 30
});

在模板中使用Reactive
在模板中可以直接使用响应式对象，对对象的属性进行访问和修改。

<template><div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const user = reactive({name: 'Alice',age: 30});return { user };}
};
</script>

深层响应式
Reactive会递归地将对象的所有嵌套属性都变成响应式，确保整个对象的变化能够被追踪。

const nestedData = reactive({nestedObj: {key: 'value'}
});// 修改嵌套属性
nestedData.nestedObj.key = 'new value';

import { reactive, toRefs } from 'vue'// 通过 reactive 定义响应式数据
const state = reactive({// 定义每一个表单控件的配置项：type类型、label文本、prop绑定字段 等信息items: [{label: "用户名",prop: "name",inputwidth: "100%",}, {password: true,label: "密码",prop: "pwd",inputwidth: "100%",rules: [{ required: true, message: "请输入密码", trigger: 'blur' }]}, {label: "手机号",prop: "phone",inputwidth: "100%",required: true,validateType: "phone"}],// 定义每一个表单绑定字段对应的信息（form表单数据信息）formData: {name: "",pwd: "",phone: ""},// form 元素配置信息options: {size: "small",formWidth: "35%",//表单占父元素的宽度labelWidth: "80px",//标签的长度},
})// 通过 toRefs 获取 reactive 中的每一项属性的引用（js中调用使用 .value，template 中直接使用自动解析）
const { items, formData, options } = toRefs(state);console.log(items,options)

参考：

前端Vue篇之Vue3响应式：Ref和Reactive

【Vue3 易混淆概念点一】ref、toRef、toRefs、reactive 异同点