本篇内容主要讲解“vue3中的ref与reactive怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3中的ref与reactive怎么使用”吧!
一、ref
refrefref使用
refimport { ref } from 'vue';
const count = ref(0);在上面的代码中，我们创建了一个名为
countrefcountrefcount.valueref.value =ref.value<template>
<div>{{ count }}</div>
</template>
------------------
<script setup>
import { ref } from 'vue';
const count = ref(0);
console.log(count)//RefImpl {...}
console.log(count.value)//0
//使用.value改变count
count.value = 3;
console.log(count.value)//3
</script>注意：在标签中使用无需加
.value.value除此之外，
ref<template>
<div ref="myDiv">这是一个 DOM 元素</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(() => {
console.log(myDiv.value.innerHTML);
});
return {
myDiv,
};
},
};
</script>在上面的代码中，我们创建了一个名为
myDivrefdivsetup onMountedmyDivinnerHTML二、reactive
reactiverefreactive使用 reactive 的语法如下所示：
import { reactive } from 'vue';
const state = reactive({
count: 0,
});在上面的代码中，我们创建了一个名为
statecount在组件中使用
state<template>
<div>{{ state.count }}</div>
</template>除了访问属性之外，
reactivereactiveconst obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);
// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3reactive 还可以在嵌套对象和数组中创建响应式对象，例如：
const obj = {
a: 1,
b: { c: 2 }，
d: [1, 2, 3]
};
const reactiveObj = reactive(obj);
// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：
const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);
// 模板中使用
<template>
<div>{{ b.c }}</div>
</template>总之，
reactivetoRefs三、ref和reactive的使用对比
1.ref的使用方法
ref.valueimport { ref } from 'vue'
// 创建ref
const count = ref(0)
// 获取ref的值
console.log(count.value) // 输出 0
// 修改ref的值
count.value = 1
console.log(count.value) // 输出 12. reactive的使用方法
reactiveimport { reactive } from 'vue'
// 创建reactive对象
const obj = reactive({
count: 0
})
// 获取reactive对象的属性值
console.log(obj.count) // 输出 0
// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1
