to系列全家桶

toRef

如果原始对象是非响应式的就不会更新视图，（视图变，script里的数据会变）

如果原始对象是响应式的，会更新视图并改变数据（就是用来ref、reactive之类把数据变成响应式了）

<template>
  <div>
    <p>{{obj}}</p>
    <p>toRef非响应式：{{name}}</p>
    <button @click="changeMsg">changeMsge</button>
    <hr>
    <p>{{obj1}}</p>
    <p>toRef响应式：{{name1}}</p>
    <button @click="changeMsg1">changeMsge</button>
  </div>
</template>

<script setup lang="ts">
import { toRef,reactive,toRefs,toRaw} from 'vue'

const obj={name:'zs',age:18,like:'hs'}

const name=toRef(obj,'name')

const changeMsg=()=>{
  //obj.name="ls"
  name.value="非响应式改变"
  console.log(name);
  console.log(name.value);
}
//-------------------响应式数据测试
const obj1=reactive({name:'响应式',age:18,like:'hs'})

const name1=toRef(obj1,'name')

const changeMsg1=()=>{
  //obj1.name="响应式改变"
  name1.value="响应式改变"
  console.log(name1);
  console.log(name1.value);
}
</script> 
<style>
</style>

toRefs

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

一般配合 reactive 使用

将响应式对象中所有属性包装为ref对象，并返回包含这些ref对象的普通对象

对reactive定义的对象进行解构，toRefs包装，包装之后的对象中每个属性都是响应式的。

<template>
  <div>
    <p>{{obj}}</p>
    <p>{{name}}</p>
    <p>{{age}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { toRef,reactive,toRefs,toRaw} from 'vue'

const obj=reactive({name:"zs",age:18,like:"hs"})

let {name,age,like}=toRefs(obj)

const change=()=>{
  name.value='改变后'
  age.value=17
  like.value="bs"
  console.log(name,age,like);
}
</script> 
<style>
</style>

toRaw

将响应式对象转化为普通对象

<template>
  <div>
    <p>{{obj}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { toRef,reactive,toRefs,toRaw} from 'vue'

const obj=reactive({name:"zs",age:18,like:"hs"})

let state=toRefs(obj)

const change=()=>{
  console.log(state);
}
</script> 
<style>
</style>