toRef,toRefs,toRaw

<template>

  <div @click="change">

    {{ originObj }} -- {{ reactObj }}

    {{ toOrigin }} -- {{ toReactRef }} -- {{ toReactRefs }}

  </div>

  </template>

 

  <script setup lang='ts'>

  import { toRef, toRefs, toRaw, reactive } from 'vue'

 

  let originObj = { name: '小哥', age: '14' }

  let reactObj = reactive({ name: '大哥', age: '16' })

 

  // 作用相当于取响应式中某个对象出来时同时具备响应式，作用相当于解构带有响应式的属性

  let toOrigin = toRef(originObj, 'name') // 虽然originObj不是响应式对象，但是toOrigin仍然具有响应式，与课程教的不同

  let toReactRef = toRef(reactObj, 'name') // toRef是传入某个值修改为ref

 

  let toReactRefs = toRefs(reactObj) // toRefs是对针对对象都修改为ref

  let {name, age} = toRefs(reactObj) // toRefs常用于解构具有响应式的属性

 

  let toReactRaw = toRaw(reactObj)

 

  const change = () => {

    // toRef后打印出来都是ref对象，应该通过.value去赋值

    toOrigin.value = '小哥change' // 有响应式修改

    toReactRef.value = '大哥change' // 有响应式修改

 

    // toRefs是给所有对象都转化成ref,此时的数据结构是{{Ref(name),Ref(age)}},不是Ref(toReactRefs),所以不能toReactRefs.value.age

    // toReactRefs.age.value = '18'

    // 或者直接使用结构出来的值赋值

    age.value = '18'

    console.log(name,age);

 

    // toRaw是使其失去响应式

    console.log(reactObj,toReactRaw); //reactive(Object), { name: '小哥', age: '14' }

  }

  </script>

 

  <style scoped lang='scss'>

 

  </style>