Vue3中的Refs和Ref的使用有什么不同吗-群英

上一篇：JS中修改body的样式怎么操作，写法是什么下一篇：TypeScript遍历对象属性报错怎么办，如何处理

这篇文章主要介绍“Vue3中的Refs和Ref的使用有什么不同吗”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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的使用有什么不同吗内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！