Vue3 数据响应式

在项目中我们经常遇到代码中更新了但是页面没有渲染的情况，在vue3中我们就要用到数据响应式，介绍一下以下四种方式

reactive()

reactive()是一个函数，可以用来定义复杂数据类型完成响应式

例如：

const userInfo = reactive({
    name:'Jack',
    age:'19',
    sex:'Male'
})
//操作对象中name的值
const userUpdate = ()=>{
    userInfo.name = "Rose"
}

toRef()

toRef()也是函数，用于转换响应式对象中的某个属性为单独响应式数据

例如：

const userInfo = reactive({
    name:'jack',
    age:'19',
    sex:'male'
})
const name = toRef(userInfo,'name')
//操作对象中name的值
const nameUpdate = ()=>{
    name.value = "Rose"
}

toRefs()

用于解构reactive()定义的对象,转换响应式对象中所有属性（也可以是一部分）为单独响应式数据，且数据关联

例如：

const userInfo = reactive({
    name:'jack',
    age:'19',
    sex:'male'
})
const {name,age} = toRefs(userInfo)
const Update = ()=>{
    name.value = "Rose"
    age.value = '20'
}

ref()

ref()是一个函数，用来定义简单类型数据响应式

例如：

const name = ref('Jimmy')

const upData = ()=>{
    name.value = 'Jim'
}