Vue3的to系列的内置方法(toRef/toRefs/toRaw)

1、toRef

将对象中的单个属性变成响应式的。

//如下值变了，但是视图是不会变化的
import {toRef} from "vue"
const obj = {
  name:"xiaolong",
  height:"178",
  count:2
}
const state =  toRef(obj,'count')

const change = ()=>{
	state.value++
	console.log("+++++++++++++++原始对象",obj)
	console.log("+++++++++++++++引用对象",state)
}

//如果原始对象是个代理对象是会变化，也就是之前的对象是响应式的话是会变化的,如下视图是会变化的
import {toRef,reactive} from "vue"
const obj = reactive({
  name:"xiaolong",
  height:"178",
  count:2
})
const state =  toRef(obj,'count')

const change = ()=>{
	state.value++
	console.log("+++++++++++++++原始对象",obj)
	console.log("+++++++++++++++引用对象",state)
}

2、toRefs

import {toRefs,reactive} from "vue"
let {name,height,count} = reactive({
  name:"xiaolong",
  height:"178",
  count:2
})
console.log(name,height,count)  //这样打印这三个就是个基本数据类型的

//这样打印的话就是响应类型的

import {toRefs,reactive} from "vue"
let obj = reactive({
  name:"xiaolong",
  height:"178",
  count:2
})
let {name,height,count} = toRefs(obj)
console.log(name,height,count)  //这样打印这三个变成响应式的

const change = ()=>{
	count.value++
}

3、toRaw

import {toRaw,reactive} from "vue"
let obj = reactive({
  name:"xiaolong",
  height:"178",
  count:2
})

const rawType= toRaw(obj)
console.log("响应式",obj)//通过proxy代理的
console.log("普通对象,rawType )