vue3中的--ref / isRef / unref / to

1. ref(): 用来定义基本数据类型的数据。

ref是通过Object.defineProperty()的get和set实现数据代理，获取数据 **需要** .value
reactive是用来定义引用类型的数据,使用Proxy实现数据代理，获取数据 **不需要** value

<script setup>
  const data = ref('123') //响应式变量
  const num = 123 //不可修改
</script>

2. isRef(): 判断值是否为一个ref对象

<script setup>
  function doFetch(){
    // doSomething
  }
  if(isRef(val)) {
    //如果输入的val是一个ref，那么将启动一个响应式的请求
    watchEffect(doFetch) // doFetch为一个方法名
  }
</script>

3. unref(): 解包可能为ref的值。如果参数是一个ref则返回它的value，否则返回参数本身

unref(val) 等价于 val = isRef(val) ? val.value : val

<script setup>
  value = unref(val)
</script>

1. toRef()、toRefs()本质是引用，修改响应式的数据，会影响到响应式的数据，视图不改变
2. 如果对对象做了展开操作（展开运算符 - 赋值），那么就会丢失响应式的效果

4. toRef(): 一次仅能设置一个数据，接受两个参数第一个参数为该对象，第二个参数为该对象的属性

<script setup>
  import { toRef, reactive } from 'vue'

  const data = reactive({
    name: 'guoguo',
    age: '18'
  })
  const dataRef = toRef(data, 'name') //toRef 使得data中的name具有响应式
</script>

4. toRefs(): 将响应式对象中的所有属性转换为单独的响应式数据。将对象中的每个属性都做一次ref操作，使每个属性都具有响应式

<script setup>
import { toRefs, reactive } from 'vue'

  const data = reactive({
    name: 'guoguo',
    age: '18'
  })
  const dataRef = toRefs(data) //toRefs 使得data中所有属性具有响应式
  const dataRef = ...toRefs(data) // 则失去了响应式
</script>