Refs and Ref Details in Vue3
- 2021-12-05 05:19:22
- OfStack
This site also shares questions about the data in Vue3. Let's give an example of this
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')
At this time, we may think of it
es6
About deconstruction assignment, can we put the above example
nameObj
Obtain internal by deconstructing the results
name
And then directly set the
name
What about returning? That is, the code is written like this
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')
In actual operation, we found that the content on the page did not become
hanmeimei
At this time, we need to introduce
Vue3
Another content in, we should modify the code so that we can realize the responsiveness of data and pages
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')
Similarly, and
toRefs
It is very similar to that
toRef
The code example looks like this
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')