Here are the differences and reactive principles between ref and Reactive functions, how to use them in actual projects and some common questions

Ref function:

Syntax: const XXX = ref (initValue) const XXX = ref (initValue) If a primitive reactive dependency is object.defineProperty () and if a ref uses a reference type, the underlying REF defines the reactive with the help of reactive’s proxy

Basic use:

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

<script setup>
import { ref } from 'vue'
let refBaseType = ref(null)
//ref requires.value to get the value
refBaseType.value = 'i am ref'
console.log('refBaseType', refBaseType)
// Print the result
/*
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
* */
// If a ref uses an object, the underlying ref uses reactive proxy ******
let refReferenceType = ref({})
refReferenceType.value = { count: 1 }
console.log('refReferenceType', refReferenceType)
// Print the result
/* 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 // Reactive Proxy [[Handler]]: Object [[Target]]: Object [[IsRevoked]]: false * */
</script>

<style lang="scss" scoped>

</style>

Copy the code

If a REF uses an object, the REF uses a Reactive proxy

Reactive functions:

Const XXX = ref (source object) const XXX = ref (source object) Based on the Es6 Proxy implementation, Reflect reflects Proxy operations on source objects, and Reactive defines a deeper level of reactive data objects than the shallow level of reactive data objects defined by Reactive

Basic use:

<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 cannot define the basic type of proxy and the set value cannot respond to data
let setData = () = > {
  reactiveBaseType = 'fai'
}
console.log('reactiveBaseType', reactiveBaseType)
// Print the result
/*
null
* */
// If reactive uses a reference type
let reactiveReferenceType = reactive({ count: 1 })
let setReactive = () = > {
  // This setting will go to proxy
  reactiveReferenceType = { count: 1 }
  console.log(reactiveReferenceType)
  // Print the result
  /* *{count: 1} // reactive cannot replace the whole object directly, if you need to use ref * */
}
console.log('reactiveReferenceType', reactiveReferenceType)
// Print the result
Proxy {count: 1} [[Handler]]: Object [[Target]]: Object count: 1 __proto__: Object [[IsRevoked]]: false * */
</script>

<style lang="scss" scoped>

</style>

Copy the code

Note: Reactive cannot replace the entire object directly. Use ref if you need to

Conclusion:

Ref and Reactive can both be reactive

Ref: Generally used to define basic types and reference types. If the reference type is a proxy object created by reactive, the whole object can be directly copied. For example, when a table receives a data request, the whole data needs to be assigned to a response object.

Reactive: normally used for reference types, such as {}, you cannot modify the entire object at once. If you want to assign the entire array to table at once, you are recommended to use ref to define the array.

Ref and Reactive are recommended

The first way to write it is to define all objects except ref

let switchKG = ref(false)
console.log(switchKG.value)

let arr = ref([])
arr.value = [1.2.3.4.5]
console.log(arr.value)

let Obj = reactive({
  arr: []
})
reactive.arr = [1.2.3.4.5]
Copy the code

The second way to write it is to use Reactive and toRefs to export it to the page

<template>
  <div>{{arr}}</div>
  <div>{{obj}}</div>
  <div>{{swithKW}}</div>
</template>
<script setup>
import {reactive, toRefs} from "vue";

let state = reactive({
  swithKW:false.arr: [].obj: {}})console.log(state.arr)
console.log(state.obj)
// Export to page for use
const {swithKW, arr, obj } = toRefs(state)
</script>
Copy the code