toref

• 原始数据不会更新视图，数据会更新

<template>
  <div>this is hello world</div>
  <h1>{{ state }}</h1>
  <button @click="handelClick">click</button>
</template>
<script setup lang="ts">
import {toRef} from "vue"
const user = {
  name:"zhangsan"
}
const state = toRef(user,"name")
const handelClick = ()=>{
  state.value = "lisi"
  console.log(state.value) // lisi 视图不会更新
}
</script>

torefs

用于解构 ref 对象

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const obj = reactive({
    name:"zhangsan"
})
let {name} = toRefs(obj)
</script>

toRaw

用于将 响应式（proxy）对象转为普通对象

<script setup lang="ts">
import { reactive, toRaw } from 'vue'
const obj = reactive({
    name:"zhangsan"
})
const newObj = toRaw(obj)
</script>