Vue3中ref和reactive的使用方法及区别

---

前言

今天给大家讲一下在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 来进行类比，帮助大家更好的理解区别：

1. 类似使用ref
   先定义x，y为0，当使用函数时，再更新x和y的值

let x = 0
let y = 0

function updataNumber() {
    
    
	x = 2
	y = 3 
}

2. 类似使用 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

总结

通过例子和js原生例子类比给大家讲了ref和reactive的使用及区别。在实际项目中，大家还是需要根据自己平时的编程习惯来选择对应的方法。