Vue3 Refs和Ref详解
关于Vue3中的数据相应的问题,下面例子:
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')
这个时候我们可能联想到了es6中关于解构赋值的内容,我们是不是可以将上面例子中的nameObj通过结果解构的方式获取内部的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')
在实际运行中,我们发现,页面上的内容并没有变成hanmeimei,这个时候,我们需要引入Vue3中的另外一个内容,我们应该把代码修改成这样,才能实现数据和页面的响应式
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,代码实例是这样的
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')
关于Vue3中的Refs和Ref详情的文章就介绍至此,更多相关Vue3中的Refs和Ref内容请搜索编程宝库以前的文章,希望以后支持编程宝库!
闭包,是javascript的一大理解难点,网上关于闭包的文章也很多,但是很少有能让人看了就彻底明白的文章。究其原因,我想是因为闭包涉及了一连串的知识点。只有把这一连串的知识点都理解透彻,实现一个概念的闭环,才可以真正理 ...