首页 > 其他分享 >vue3 中ref和reactive的区别讲解

vue3 中ref和reactive的区别讲解

时间:2024-03-15 13:22:39浏览次数:16  
标签:定义 数据 value reactive vue3 ref 读取数据

1.定于数据角度对比:ref 用来定义:基本类型数据
reactive 用来定义:对象、或数组类型的数据
备注:ref也可以用来定义对象或数组类型数据,它内部会自动通过 reactive 转为代理对象

2.原理角度对比:ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式的(数据劫持)
reactive 通过使用 Proxy 来实现响应式(数据劫持),并通过Reflect 操作源对象内部的数据。

3 使用角度对比:ref 定义的数据:操作数据需要 .value,读取数据时模版中直接读取不需要 .value reactive 定义的数据:操作数据与读取数据,均不需要 .value

参考文献: https://www.jb51.net/article/270334.htm

标签:定义,数据,value,reactive,vue3,ref,读取数据
From: https://www.cnblogs.com/zw100655/p/18075196

相关文章

  • VS Code配置Vue3模板代码
    打开VSCode,file-Preferences-ConfigureUserSnippets{"Printtoconsole":{"prefix":"vue","body":["<scriptsetuplang=\"ts\">","i......
  • Vue3生命周期 及和vue2的对比
    一、Vue3中的生命周期1、setup():开始创建组件,在beforeCreate和created之前执行,创建的是data和method2、onBeforeMount():组件挂载到节点上之前执行的函数;3、onMounted():组件挂载完成后执行的函数;4、onBeforeUpdate():组件更新之前执行的函数;5、onUpdated():......
  • 【vue3】关于ref、toRef、toRefs
    1.ref函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意JS中操作值的时候,需要加.value属性,模板中正常使用即可2.toRef函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref函数也可以转换,但值非关联)3.toRefs函数的作用:转换响......
  • vue3 批量导入excel表
    安装xlxs插件npminstallxlsx//安装import*asXLSXfrom"xlsx";//引入 批量导入里面引用了element-plus的loading和弹窗,不需要的可以去掉letexcelloading;constimportExcel=(e)=>{//导入excelvarfile=e.target.files[0];if(......
  • vue3中setup使用及其语法糖的用法
    使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。.setup语法糖中新增的apidefineProps:子组件接收父组件中传来的propsdefineEmits:子组件调用父组件中的方法defineExpose:子组件暴露属性,可以在父组件中......
  • vue2与vue3的区别
     vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用了es5的一个APIObject.definepropert()对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。1.vue2和vue3双向数据绑定原理发生了改变相比与vue2,使用proxyAPI优势有:de......
  • 搭建vue3版taro以及相关api
    1.安装Taro1.使用npm或者yarn全局安装@tarojs/cli$npminstall-g@tarojs/cli$yarnglobaladd@tarojs/cli2.项目初始化:taroinitmyApp编译运行使用Taro的build命令可以把Taro代码编译成不同端的代码,然后在对应的开发工具中查看效果。Taro编译分......
  • vue3 引入 ElementUI
     vue3使用elementUI会报错,需要引入elementUIPlus。Plus官网:https://element-plus.gitee.io/zh-CN/guide/quickstart.htmlUI官网:https://element.eleme.cn/#/zh-CN/component/installation1.安装ElementUIPlusnpminstallelement-plus--savepackage.json检查。......
  • springboot3+vue3(十一)springboot多环境开发
    在开发中我们往往会遇到,本地环境、测试环境、生产环境分别一套配置。如数据库连接,端口号等配置各不相同的问题。 1、多文件配置    2、多文件分组配置如果配置文件有很多的配置信息几百行的情况,为了方便维护我们可以根据功能的情况进行分组拆分。如:服务器相关配......
  • vue3 瀑布流 vue-masonry使用方法
    npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"......