vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3中ref与reactive

前端vue3中的ref与reactive用法及区别总结

作者：是个忙人.

这篇文章主要给大家介绍了关于前端vue3中的ref与reactive用法及区别的相关资料,关于ref及reactive的用法,还是要在开发中多多使用,遇到响应式失效问题,文中通过代码介绍的非常详细,需要的朋友可以参考下

ref与reactive的区别

接收值的类型不同

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

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

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监听方式不同

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

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

附：ref和reactive定义数组对比

使用ref定义数组举例如下

const tableData = ref([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}
<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

图中以我们常用的表格数据举例，可以看到，ref定义数组与定义基本数据类型没什么差别，接下来看看reactive

const tableData = reactive([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}
<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

需要注意的是，使用 tableData = data 的修改方式会造成 tableData 响应式丢失，解决方法如下（供参考）

// 方法一：改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.value = data // 使用.value重新赋值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.push(...data) // 先使用...将data解构，再使用push方法
}
// 方法三：定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通过访问list属性重新赋值
}
// 方法四：赋值前再包一层 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 赋值前再包一层reactive
}

总结 

到此这篇关于前端vue3中的ref与reactive用法及区别总结的文章就介绍到这了,更多相关vue3中ref与reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文