前端 vue3 中的 ref 与 reactive

ref与reactive的区别

接收值的类型不同

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

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

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

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

const reactive1 = reactive(0)            // false
const 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)  // 0
 
const ref2 = ref({ count: 0 })
console.log(ref2.value.count)  // 0
 
ref1.value = 1
console.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对象，初始值为0
console.log(count.value); // 访问Ref对象的值
count.value = 1; // 修改Ref对象的值

在setup()中使用

在setup()函数中，我们可以使用ref()来创建响应式数据，以便在组件中使用。

import { ref } from 'vue';

export default {
  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';

export default {
  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适用于管理复杂对象，使整个对象都变成响应式。