前言
今天给大家讲一下在vue3中ref和reactive的使用方法，以及他们的使用区别在哪里，下面通过一个简单的计数器的例子来给大家进行说明
ref—计数器案例
ref 主要用于基本类型的响应，看如下代码：
import { ref } from 'vue' // 导入ref
interface DataProps {
count: number;
double: number;
increase: () => void
}
export default {
name: 'App',
setup() {
const count = ref(0)
const double = computed(() => {
return count.value*2
})
const increase = () => {
count.value
}
return {
count,
double,
increase
}
}
}
在setup方法通过ref实现响应式对象，最后要在return中进行返回。
我们发现几个变量都分散在各处，那么有没有什么办法可以将他们包裹在对象里呢？那就来看看下面的reactive
reactive—计数器案例
reactive：主要用于引用类型的响应。里面属性拿出来单独使用，可能会丧失响应性
代码如下（示例）：
import { reactive, toRefs } from 'vue'
interface DataProps {
count: number;
double: number;
increase: () => void
}
export default {
name: 'App',
setup() {
const data: DataProps = reactive({
count: 0,
increase: () => { data.count },
double: computed(() => data.count * 2)
})
const refData = toRefs(data)
refData.double
return {
...refData
}
}
}
定义一个data对象，在里面定义参数
在return中我们需要让变量保持响应式，那么就需要使用toRefs，就可以将普通的类型变为ref响应式类型
PS：在return里面使用…refData（前面加三点），那么在使用的时候就可以直接使用变量名，例如：< h1> {{count}} < /h1>
区别
通过上面的例子，大家应该对ref和reactive有了一些了解，下面通过标准的 js 来进行类比，帮助大家更好的理解区别：
类似使用ref
先定义x，y为0，当使用函数时，再更新x和y的值
let x = 0
let y = 0
function updataNumber() {
x = 2
y = 3
}类似使用 reactive
在pos中有两个key都为0，在函数中更新两个值pos.x = 2.
x,y必须和对象在一起才能引用，如果像第三种const { x } = pos，先取出来，再进行更新，x还是旧的值，并且会丧失响应式
const pos = {
x: 0,
y: 0,
}
function updata Object() {
pos.x = 2
pos.y = 3
}
const { x } = pos
pos.x = 3附：ref和reative的使用心得
一般来说，vue定义响应式变量有两种写法:
1）写法1：reative声明所有变量，最后return的时候一起toRefs
一种是把reative当做vue2的data，所有变量用reative一次性生成，最后一起toRefs（这个注意不要漏）。优点是赋值不用写.value
<template>
<h2>name: {{state.name}}</h2>
<h2>age: {{state.age}}</h2>
<h2>wife: {{state.wife}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
/*
reactive:
作用: 定义多个数据的响应式
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import {
reactive,toRefs
} from 'vue'
export default {
setup () {
/*
定义响应式数据对象
*/
const state = reactive({
name: 'tom',
age: 25,
wife: {
name: 'marry',
age: 22
},
})
console.log(state, state.wife)
const update = () => {
state.name = '--'
state.age = 1
state.wife.name = ' '
state.wife.age = 2
}
return {
...toRefs(state)
}
}
}
</script>
2）写法2：从头到尾都用ref声明变量，赋值的时候要注意加.value
第二种，从头到尾都用ref，除了赋值时要.value很麻烦，其他倒没什么。
<template>
<h2>{{count}}</h2>
<hr>
<button @click="update">更新</button>
</template>
<script>
import {
ref
} from 'vue'
export default {
setup () {
// 定义响应式数据 ref对象
const count = ref(1)
console.log(count)
// 更新响应式数据的函数
function update () {
// alert('update')
count.value = count.value 1
}
return {
count,
update
}
}
}
</script>
总结
通过例子和js原生例子类比给大家讲了ref和reactive的使用及区别。在实际项目中，大家还是需要根据自己平时的编程习惯来选择对应的方法。
到此这篇关于Vue3中ref和reactive的基本使用及区别的文章就介绍到这了,更多相关Vue3 ref和reactive使用内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！