Vue3的ref和reactive区别及使用

　　Vue3官方文档中定义响应式数据使用ref()或者reactive()

 一、ref的研究

　　1）ref创建一个响应式数据，一般来说用于创建简单类型的响应式对象，比如String、Number、boolean类型；

　　2）当我们给ref传递一个值之后，如果使用的是基本类型响应式依赖Object.defineProperty( )的get( )和set( )，如果ref使用的是引用类型，ref函数底层会自动将ref转换成reactive; ref(18) => reactive({value:18})；

　　3）需要注意的是ref定义的值在Vue中使用直接使用所定义的字段，但是在js中获取或者修改值需要通过value；

　　4）ref也可以创建引用类型，对于复杂的对象，值是一个被proxy拦截处理过的对象，但是里面的属性不是RefImpl类型的对象，proxy代理的对象同样被挂载到value上，所以可以通过obj.value.key来读取属性，这些属性同样也是响应式的，更改时可以触发视图的更新

　　具体使用及结构打印如下：

<template>
  <h3>{{ refBaseType }}</h3>
  <h3>{{ refReferenceType }}</h3>
</template>

<script setup>
import { ref } from 'vue'
let refBaseType = ref(null)
//ref 需要用.value去获取值
refBaseType.value = 'i am ref'
console.log('refBaseType', refBaseType)
//打印结果
/*
RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: "i am ref", _value: "i am ref"}
dep: undefined
__v_isRef: true
_rawValue: "i am ref"
_shallow: false
_value: "i am ref"
value: "i am ref"
__proto__: Object
* */
//如果ref使用的是对象，底层ref会借助reactive的proxy ******
let refReferenceType = ref({})
refReferenceType.value = { count: 1 }
console.log('refReferenceType', refReferenceType)
//打印结果
/*
RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
_rawValue: {count: 1}
_shallow: false
_value: Proxy {count: 1}
value: Proxy  //如果ref使用的是对象，底层ref会借助reactive的proxy
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

* */
</script>

 

　　二、reactive研究

　　1）reactive里面参数定义必须是对象或者数组(json/arr)，本质将传入的数据包装成proxy对象；

　　2）基于Es6的Proxy实现，通过Reflect反射代理操作源对象，相比于reactive定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象；

　　3）

<template>
  <h3>{{ reactiveBaseType }}</h3>
  <h3>{{ reactiveReferenceType }}</h3>
  <div @click="setData">setData</div>
  <div @click="setReactive">setReactive</div>
</template>

<script setup>
import { reactive } from 'vue'
let reactiveBaseType = reactive(null)
//reactive 无法定义基本类型的proxy,且设置值无法响应数据
let setData = () => {
  reactiveBaseType = 'fai'
}
console.log('reactiveBaseType', reactiveBaseType)
//打印结果
/*
null
* */
//如果reactive使用的是引用类型
let reactiveReferenceType = reactive({ count: 1 })
let setReactive = () => {
  //这样设置会去proxy
  reactiveReferenceType = { count: 1 }
  console.log(reactiveReferenceType)
  //打印结果
  /*
   *{count: 1} //proxy 没了，所以reactive申明的无法直接替换整个对象，如果有这个需求请使用ref
   * */
}
console.log('reactiveReferenceType', reactiveReferenceType)
//打印结果
/*
//proxy响应式
Proxy {count: 1}
[[Handler]]: Object
[[Target]]: Object
count: 1
__proto__: Object
[[IsRevoked]]: false
* */
</script>

<style lang="scss" scoped>

</style>

 

　　三、总结

　　1）一般来说，ref被用来定义简单的字符串或者数值，而reactive被用来定义对象数组等

　　2）实际上都能用，而且ref也可以去定义简单的对象和数组，也是具有响应式的，不过官方文档中有提到如果将对象分配为ref值，则可以通过reactive方法使该对象具有高度的响应式。