ref与reactive的区别

接收值的类型不同

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