vue3中的ref与reactive怎么使用

本篇内容主要讲解“vue3中的ref与reactive怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3中的ref与reactive怎么使用”吧!

一、ref

ref

是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用

ref

的时候，我们需要传入一个初始值，

ref

会返回一个包含了这个初始值的对象。

使用

ref

的语法如下所示：

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

在上面的代码中，我们创建了一个名为

count

的变量，它的初始值为 0。通过调用

ref

函数，我们将

count

变量转化为了一个

ref

对象。在组件中使用

count

的时候，我们需要通过

.value

来访问它的值,且

ref.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

还可以用来监听 DOM 元素的变化：

<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>

在上面的代码中，我们创建了一个名为

myDiv

的

ref

对象，并将它赋值给了一个

div

元素。在组件的

setup

函数中，我们使用了

 onMounted

钩子函数，在组件渲染完成之后，打印出了

myDiv

元素的

innerHTML

。

二、reactive

reactive

是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与

ref

不同的是，

reactive

返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。

使用 reactive 的语法如下所示：

import { reactive } from 'vue';
const state = reactive({
  count: 0,
});

在上面的代码中，我们创建了一个名为

state

的响应式对象，它包含了一个名为

count

的属性，初始值为 0。

在组件中使用

state

的时候，我们可以像访问普通对象的属性一样访问它的属性：

<template>
  <div>{{ state.count }}</div>
</template>

除了访问属性之外，

reactive

也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过

reactive

将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：

const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);
// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3

reactive 还可以在嵌套对象和数组中创建响应式对象，例如：

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>

总之，

reactive

除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用

toRefs

方便在模板中使用。

三、ref和reactive的使用对比

1.ref的使用方法

ref

创建的变量可以通过

.value

来获取和修改其值。例如：

import { ref } from 'vue'
// 创建ref
const count = ref(0)
// 获取ref的值
console.log(count.value) // 输出 0
// 修改ref的值
count.value = 1
console.log(count.value) // 输出 1

2. reactive的使用方法

reactive

创建的对象需要通过解构赋值的方式获取和修改其属性值。例如：

import { reactive } from 'vue'
// 创建reactive对象
const obj = reactive({
  count: 0
})
// 获取reactive对象的属性值
console.log(obj.count) // 输出 0
// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

以上就是vue3中的ref与reactive怎么使用的详细内容，更多关于vue3中的ref与reactive怎么使用的资料请关注九品源码其它相关文章！