vue3_to系列全家桶

1.toRef( )

const state = reactive({
  foo: 1,
  bar: 2
})
// 将foo转换为响应式对象
const fooRef = toRef(state,'foo')
//const fooRef = ref(state.foo) 这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值
const change = ( ) =>{
	//更改该 ref 会更新源属性
    // fooRef.value ++
    // console.log(state.foo);//2
	// 更改源属性也会更新该 ref
    state.foo += 100
    console.log(fooRef.value);//101
}

当使用对象属性签名时，即使源属性当前不存在，toRef() 也会返回一个可用的 ref。

2.toRefs

帮我们批量创建ref对象主要是方便我们解构使用

  const obj = reactive({
    name:'kathy',
    age:25
  })
  let newObj = toRefs(obj)
  let {name,age} = toRefs(obj)
  const change = () =>{
    // 修改newObj，obj对应内容同步更改
    // newObj.age.value = 33
    // console.log(obj);
    // 修改obj,newObj对应内容同步更改
    // obj.age = 44
    // console.log(newObj);
    // 解构形式：源对象与解构出来的内容更改同步
    // name.value = 'lucky'
    // console.log(obj);
    obj.age = 54
    console.log(age);
  }

3.toRaw

将响应式对象转化为普通对象
toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象

const obj = reactive({
    name:'kathy',
    age:25
  })
console.log(toRaw(obj));//{name: 'kathy', age: 25}