首页 > 其他分享 >vue3将对象转为响应式/ref/reactive/toRefs

vue3将对象转为响应式/ref/reactive/toRefs

时间:2022-08-18 14:45:44浏览次数:53  
标签:const 响应 data toRefs reactive vue3 ref

一、ref 的作用就是将一个原始数据类型(primitive data type)转换成一个带有响应式特性的数据类型,原始数据类型共有7个,分别是:String/Number/BigInt/Boolean/Symbol/Null/Undefined
用法 》头部导入:import {ref} from 'vue' ; 声明:const name = ref('jay');获取值:console.log(name.value);
二、reactive是用来定义更加复杂的数据类型,但是定义后里面的变量取出来就不在是响应式Ref对象数据了,所以需要用toRefs函数转化为响应式数据对象。
import { computed, reactive,toRefs } from "vue";
const data = reactive({name: "daxiong",birthYear: 2000});
const refData = toRefs(data);
此时 refData 就是响应式的。
参考:https://zhuanlan.zhihu.com/p/359763090

标签:const,响应,data,toRefs,reactive,vue3,ref
From: https://www.cnblogs.com/xsj1989/p/16598630.html

相关文章

  • vue3学习第一天
    vue3简介:1、性能的提升(打包快,渲染快,内存少)2、源码的升级使用proxy代替defineProperty实现响应式重写虚拟dom的实现和Tree-Shaking(让打包体积变小,应用到webpack)3、更好......
  • vue3+vite3打包组件的踩坑心得
    1.再要做CDN的JS文件的时候要使用  rollup-plugin-external-globals这个插件,但是不做CDN的时候要关闭注释掉,不然引入插件后可能会报一些依赖库的全局变量未声明的错误,......
  • vue3的setUp语法
    <!--vuesetupApi语法演示--><template><viewclass="content"><imageclass="logo"src="/static/logo.png"></image><viewclass="text-area"><viewclass="tit......
  • 记录vue3
    <template><div><divclass="content"><!--面包屑--><divclass="breadcrumbs"><span><span@click="goGoodsList">数字商......
  • vue3引入axios
    1.下载axiosnpminstallaxios--save2.在scr目录下自定义一个request文件夹  3.在刚刚建的文件夹中创建一个引入axios的api.js文件4.api.js里......
  • vue3------组件生命周期
    组件的生命周期是指:组件从创建 →运行(渲染)→销毁的整个过程 完整的生命周期: ......
  • shallowRef和shallowReactive使用误区-视图更新了
    按照vue3文档中得说明,在使用shallowRef和shallowReactive是浅响应得,即修改深层数据视图应该是不更新得,但是使用过程中往往会出现视图更新得情况,如下:修改前:    ......
  • 加载远程vue文件 vue3-sfc-loader
    需求项目在写一些需求的时候,现场可能会有些变动,但是不想从新打包,这种情况可以考虑单独不打包的vue文件注意vue2import{loadModule}from'vue3-sfc-loader/dist/vue2......
  • 环境搭建: Vue3+Echarts5+vue-eharts + 移动端rem适配
    对于数据可视化的最后一站,就是移动数据报表的展示,毕竟手机端的适普性,便携性,灵活性更高.包括我自己也是更多在移动端进行轻量办公.而用主流的商业BI平台在PC端的......
  • vue3 做keepalive需要注意的事项
    再vue2里面做可以这么写:<keep-alive><router-view></router-view></keep-alive>但是报一个警告:vue-router.mjs:35[VueRouterwarn]:<router-view>cann......