Vue3中的Refs和Ref详情


Posted in Vue.js onNovember 11, 2021

小编同样和大家分享关于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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
详细聊聊vue中组件的props属性
一定要知道的 25 个 Vue 技巧
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
You might like
PHP获取windows登录用户名的方法
2014/06/24 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python语言中with as的用法使用详解
2018/02/23 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
水毁工程实施方案
2014/04/01 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
师范生求职信
2014/06/14 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
人与自然观后感
2015/06/16 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书