vue3 to使用(五)

1: 自定义解构数组

const main = reactive({ name: 'aaa', age: 18 })

const toRefs = <T extends object>(object: T) => {
  const map: any = {}
  for (const key in object) {
    map[key] = toRef(object, key)
  }
  return map
}

const newCreate = () => {
  name.value = '姓名'
  console.log(name, age)
}

通过toRefs解构数组

import {  toRefs } from 'vue'
const main = reactive({ name: 'aaa', age: 18 })

const { name, age } = toRefs(main)
// 效果相同，下面就省略了~~~

使用toRaw解除双向绑定

const main = reactive({ name: 'aaa', age: 18 })
console.log(main,toRaw(main))  // 前面的main具有proxy实例效果，后面的数据失去双向绑定，变成普通对象

手动去除

console.log(main,main['__v_raw']  // 前面的main具有proxy实例效果，后面的数据失去双向绑定，变成普通对象