vue3的to系列全家桶---kalrry

简介

to系列包含 toRef、toRefs、toRaw

一、toRef

1. 只能用于修改响应式（reactive）的值
2. 非响应式的无变化
3. toRef接受两个参数，第一个是对象，第二个是对象的key，相当于把这个对象的key对应的值取出来变成一个ref对象，使之成为响应式

实例

import { ref, reactive, toRef } from 'vue';
import type { Ref } from 'vue'

const man = reactive({ name: '小满', age: '23', like: 'kalrry' })
const like1 = toRef(man, 'like')
const change1 = () => {
  man.like = 'unakey已修改'
  console.log('man.like', man.like);
  console.log('like', like1);

}

二、toRefs

toRefs是给对象的每一个添加ref响应式
toRefs源码实现

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

实例

import { ref, reactive, toRef, toRefs } from 'vue';

const man = reactive({ name: '小满', age: '23', like: 'kalrry' })
const like1 = toRef(man, 'like')

// const toRefs = <T extends object>(object: T) => {
//   const map: any = {}
//   for (let key in object) {
//     map[key] = toRef(object, key)
//   }
//   return map
// }
调用man对象的每一个值赋予ref响应式
const { name, age, like } = toRefs(man)
const change1 = () => {
  name.value='k8888'
  console.log('name,age,like', name, age, like)
}

传送门

三、toRaw

toRaw可以让响应式数据脱离响应式
实例

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

const man = reactive({ name: '小满', age: '23', like: 'kalrry' })
const change1 = () => {
  console.log('man', man,toRaw(man))
}

如下图输出