小編同樣和大家分享關(guān)于Vue3中的數(shù)據(jù)相應(yīng)的問(wèn)題樱拴，之前寝凌，我們寫過(guò)這樣的例子。大家還可以關(guān)注我的微信公眾號(hào)顽悼，蝸牛全棧拱撵。
Vue.createApp({
template: `<div>{{ nameObj.name }}</div>`,
setup() {
const { reactive } = Vue
const nameObj = reactive({name:'lilei',age:18})
setTimeout(() => {
nameObj.name = 'hanmeimei'
},2000)
return {
nameObj
}
}
}).mount('#root')
這個(gè)時(shí)候我們可能聯(lián)想到了es6中關(guān)于解構(gòu)賦值的內(nèi)容辉川，我們是不是可以將上面例子中的nameObj通過(guò)結(jié)果解構(gòu)的方式獲取內(nèi)部的name，然后直接將name返回呢拴测？也就是將代碼寫成這樣
Vue.createApp({
template: `<div>{{ name }}</div>`,
setup() {
const { reactive,toRefs } = Vue
const nameObj = reactive({name:'lilei',age:18})
let { name } = nameObj
setTimeout(() => {
name.value = 'hanmeimei'
},2000)
return {
name
}
}
}).mount('#root')
在實(shí)際運(yùn)行中乓旗，我們發(fā)現(xiàn)，頁(yè)面上的內(nèi)容并沒(méi)有變成hanmeimei集索，這個(gè)時(shí)候屿愚，我們需要引入Vue3中的另外一個(gè)內(nèi)容，我們應(yīng)該把代碼修改成這樣务荆，才能實(shí)現(xiàn)數(shù)據(jù)和頁(yè)面的響應(yīng)式
Vue.createApp({
template: `<div>{{ name }}</div>`,
setup() {
const { reactive,toRefs } = Vue
const nameObj = reactive({name:'lilei',age:18})
let { name } = toRefs(nameObj)
setTimeout(() => {
name.value = 'hanmeimei'
},2000)
return {
name
}
}
}).mount('#root')
同樣妆距，和toRefs很類似的還有toRef，代碼實(shí)例是這樣的
Vue.createApp({
template: `<div>{{ age }}</div>`,
setup() {
const { reactive,toRef } = Vue
const nameObj = reactive({name:'lilei'})
let age = toRef(nameObj,'age')
setTimeout(() => {
age.value = 'hanmeimei'
},2000)
return {
age
}
}
}).mount('#root')
又是前端進(jìn)步的一天函匕，一起加油娱据！
