了解 Vue3 的响应式利器，让你开发效率大大提升

        在读本篇文章前先了解一下Vue3响应式原理是怎样，可以看文章：细说Vue响应式原理的10个细节！

相对于Vue2的defineProperty实现的数据响应式，Vue3对数据响应的处理分工更加明确，通过组合式api中ref与reactive两个暴露给开发者的函数对数据进行包装，从而实现了数据响应式，那么它们有什么区别？下面我们一起来根据例子来学习！

ref：定义基本数据类型、引用数据类型的响应式。也就是说ref(value)，这个value类型可以是基本数据类型，也可以是引用数据类型，但是在js中使用时必须以属性.value格式使用，在template中可以直接调用数据。

<template>
  <div>
    <div><button @click="changeValue">修改</button></div>
    <div>
      <p>当前strRef：{
   
   { strRef }}</p>
      <p>当前objRef：姓名：{
   
   { objRef.name }} 爱好：{
   
   { objRef.hobboy }}</p>
      <p>当前arrRef：{
   
   { arrRef }}</p>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, shallowRef } from 'vue'
export default defineComponent({
  setup () {
    const strRef = ref('sapper');// 基本数据类型
    const arrRef = ref([1, 3, 2]);// 数组类型
    const objRef = ref({  // 对象类型
      name: 'sapper',
      hobboy: ['吉他', '原神']
    })
    const changeValue = () => {
      strRef.value = '工兵';
      arrRef.value[1] = 4;
      objRef.value.hobboy[1] = '滑冰';
    }
    return {strRef,objRef,arrRef,changeValue}
  }
})
</script>

reactive：定义引用类型数据的响应式，不支持基本数据类型，如果需要写基本数据类型只能是放在对象中，也就是说reactive(value)，这个value类型必须是引用类型。

<template>
  <div>
    <div><button @click="changeValue">修改</button></div>
    <div>
      <div>当前objReactive：
        <br/>
        姓名：{
   
   { objReactive.name }}<br/> 
        爱好：{
   
   { objReactive.hobboy }}
      </div>
      <div>当前arrReactive：{
   
   { arrReactive }}</div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup () {
    const arrReactive = reactive([1, 3, 2]);// 数组类型
    const objReactive = reactive({  // 对象类型
      name: 'sapper',
      hobboy: ['吉他', '原神']
    })
    const changeValue = () => {
      arrReactive[1] = 4;
      objReactive.name = '工兵';
      objReactive.hobboy[1] = '滑冰';
    }
    return {objReactive,arrReactive,changeValue}
  }
})
</script>

从上面两个例子中我们可以看出不管什么类型数据，ref都需要以.value来调用ref定义的数据，对于引用数据类型来看，我们可以看出代码不美观，所以一般对于引用类型数据，都推荐使用reactive来定义；对于基本数据类型，可以使用ref也可以使用reactive来定义。