[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'})。

js 复制代码

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()函数中使用，管理简单的数据状态。

js 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
};

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

js 复制代码

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

Reactive

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

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

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

js 复制代码

import { reactive } from 'vue';

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

在模板中使用Reactive

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

js 复制代码

<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会递归地将对象的所有嵌套属性都变成响应式，确保整个对象的变化能够被追踪。

js 复制代码

const nestedData = reactive({
  nestedObj: {
    key: 'value'
  }
});

// 修改嵌套属性
nestedData.nestedObj.key = 'new value';

js 复制代码

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 异同点