前端 vue3 中的 ref 与 reactive

ref与reactive的区别

接收值的类型不同

• ref：ref可以处理基础类型的值，也可以处理引用类型的值。

const ref1 =ref(0)// trueconst ref2 =ref({ count:0})// true

用于创建一个响应式的基本数据类型时，比如数字、字符串等。它将普通的数据变成响应式数据，可以监听数据的变化。使用

ref

时，我们可以通过

.value

来访问和修改数据的值。

• reactive：reactive仅处理引用类型的值，不允许传递基础类型的值。

const reactive1 =reactive(0)// falseconst reactive2 =reactive({ count:0})// true

reactive

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

访问数据的方式不同

对于

ref

来说，无论是原始类型还是对象，访问数据都需要通过

.value

的形式进行，更新数据也需要通过

.value

来更新。

<template><div>{{ dxc }}</div></template><script setup>import{ ref }from'vue'const dxc =ref(0)</script>

但在

<template>

中使用ref的值时不需要带上

.value

。

const ref1 =ref(0)console.log(ref1.value)// 0const ref2 =ref({ count:0})console.log(ref2.value.count)// 0
 
ref1.value =1console.log(ref1.value)// 1

watch监听方式不同

• ref可以直接监听数据，当数据发生变化的时候，就会执行 watch 函数对应的回调。

const ref1 =ref(0)watch(ref1,()=>{console.log('changed!')})

这里只是原始类型数据，如果是对象的话，需要深度监听

deep:true

。

const ref1 =ref({num:1})watch(ref1,()=>{console.log('changed!')})// ref1.value.num = 1 // 执行该语句时并不会触发watch监听，watch 并没有对ref1进行深度监听// 但注意，此时dom是能更新的，ref会将其转换成 reactive 的形式// 要想深入监听，只需要加一个对应的参数即可const ref1 =ref({num:1})watch(ref1,()=>{console.log('changed!')},{ deep:true})

• reactive因为本质是对象，所以在 watch 的时候本能的会添加 deep 属性。vue 对其做了优化 watch 监听 reactive 的时候可以不添加 deep 属也能够对其做深度监听。

const reactive1 =reactive({num:1})watch(reactive1,()=>{console.log('changed!')})// reactive1.num = 1// 触发watch监听

Ref基本用法及在setup()中的使用

基本用法

在

Vue3

中，

ref

用于创建一个响应式的基本数据类型，如数字、字符串等。通过

ref()

函数创建一个

ref

对象，然后可以通过

.value

来访问和修改数据值。

import{ ref }from'vue';const count =ref(0);// 创建一个Ref对象，初始值为0console.log(count.value);// 访问Ref对象的值
count.value =1;// 修改Ref对象的值

在setup()中使用

在

setup()

函数中，我们可以使用

ref()

来创建响应式数据，以便在组件中使用。

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

<script setup>

语法是一种简洁的写法，可以在单文件组件中更便捷地使用

ref

。

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

Reactive基本概念及在模板中的使用

基本概念

在

Vue3

中，

reactive

用于创建一个响应式对象，使对象的属性发生变化时能够被检测到。通过

reactive()

函数创建一个响应式对象，对象的所有属性都变成响应式。

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';exportdefault{setup(){const user =reactive({
      name:'Alice',
      age:30});return{ user };}};</script>

ref与reactive用法总结

ref

• 基本用法：Ref用于创建一个响应式的基本数据类型，如数字、字符串等。通过ref函数创建，访问和修改数据值需要使用.value。
• 在setup()中使用：在setup()函数中，我们可以使用ref来创建响应式数据，并在模板中使用。
• <script setup>语法：<script setup>语法是Vue3推荐的一种写法，可以在单文件组件中更简洁地使用ref。
• 为何使用ref：Ref适用于管理简单的基本数据类型，如数字、字符串等。

reactive

• 基本概念：Reactive用于创建一个响应式对象，可以包含多个属性。通过reactive函数创建，对象的任何属性变化都会被检测到。
• **在模板中使用Reactive**：在模板中可以直接使用响应式对象，对对象的属性进行访问和修改。
• 深层响应式：Reactive会递归地将对象的所有嵌套属性都变成响应式。
• 与ref区别：Ref适用于简单数据类型，而Reactive适用于对象，可以处理对象的多个属性。
• **为何使用Reactive**：Reactive适用于管理复杂对象，使整个对象都变成响应式。