©2020-2024 ioDraw All rights reserved
在vue3中一般返回的数据是不响应的，如果需要响应式需要在定义时声明
方法1：reactive（）：
定义：reactive（）是一个函数，可以用来定义复杂数据类型完成响应式
案例：
<div>{{userInfo.name}}</div> //4，结果打印Cat <button
@click="userNameUpdate"><button> <script lang='setup'> //1，引用reactive import
{reactive} from 'vue' //2，定义响应式对象 const userInfo = reactive({ name:'' })
//3，点击改变响应式对象中name的值 const userNameUpdate = ()=>{ userInfo.name = "Cat" }
</script>
方法2：toRef（）：
定义：当我们在渲染数据时，不希望用到前缀时，可以使用组合toRef（）
toRef（）是函数，转换响应式对象中的某个属性为单独响应式数据，他们之间依然相互绑定
案例：
<div>{{name}}</div> //先打印Vue2 <button @click='nameUpdata'>修改</button>
//点击后打印Vue3 <script lang='setup'> //1，引用reactive，toRef import {reactive,toRef}
from 'vue' //2，定义响应式对象 const userInfo = reactive({ name:'Vue2' }) //3，定义单独响应式变量
const name = toRef(userInfo,'name') //4，点击修改name值 const nameUpdata = ()=>{
name.value = 'Vue3' } </script>
方法3：toRefs（）：
定义：可以定义转换响应式对象中所有属性为响应式数据，通常用于结构reactive定义的对象，转换响应式对象中所有属性（也可以是一部分）为单独响应式数据，对象成为普通对象，且数据关联
案例：
<div>姓名：{{name}}</div> <div>年龄：{{age}}</div> <button @click =
'upData'>修改信息</button> <script lang='setup'> //1，引用reactive、toRefs import
{reactive,toRefs} from 'vue' //2，定义响应式对象 const userInfo = reactive({ name:'张三',
age:'23' }) //3，定义转换单独响应式数据 const {name,age} =toRefs(userInfo) //4，修改数据事件 const
upData = () =>{ name.value = '李四' age.value = '24' } </script>
方法4：ref（）：
定义：ref（）是一个函数，用来定义简单类型数据响应式
注意：
1）在修改值和获取值时需要用.value
2）在渲染数据时可以省略.value
案例：
<div>{{name}}</div> <button @click="upData">修改</button> <script lang='setup'>
//1，引用ref import {ref} from 'vue' //2，定义响应式变量 const name = ref('vue2')
//3，修改数据事件 const upData = ()=>{ name.value = 'vue3' conslot.log(name.value) }
</script>
ref也可以用于对象或数组