vue3.0 demo代码记录
最近在研究vue3.0,这里给大家分享下找到的介绍,
以下内容转载于:https://blog.csdn.net/baidu_31108777/article/details/114880810?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163575360816780262549483%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163575360816780262549483&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-114880810.pc_search_es_clickV2&utm_term=vue3.0&spm=1018.2226.3001.4187
一、vue3.0六大亮点
1 2 3 4 5 6 | 1. 编译性能比vue2.x快1.2~2倍。 2. 按需编译,体积比vue2.x更小。 3. 支持组合API(类似与React hook). 4. 更好的TS支持。 5. 暴露了自定义渲染API。 6. 使用更先进的组件。 |
二、vue3.0如何变快的?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 1. diff算法优化: vue2.0中的虚拟DOM是进行全量的对比。 vue3.0中新增了静态标记(PatchFlag),在与上次虚拟节点进行对比的时候,只对比有静态标记的节点,并且可以通过flag的信息得知当前节点要对比的具体内容。 例如:_createVNode( 'p' , null ,_toDisplyString(_ctx.msg) + '}' ,1) patchFlags 静态标记枚举类。 Text=1, //动态文本节点。 Text=2, //动态class。 Text=4, //动态Style。 Text=8, // 动态属性。 2. hoist Static静态提升 vue2中无论元素是否参与更新,每次都会重新创建,再渲染。 vue3中对于不参与更新的元素,会做静态提升,只会创建一次,在渲染时直接复用。 3. cacheHandlers事件侦听器缓存 默认情况下onClick会被视为动态绑定,所以每次都会追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可。 |
三、怎么按需编译,体积更小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 1. 创建vue3的3种方式 vue-cli webpack vite 2. 什么是vite? vite是vue作者开发的一款意图取代webpack的工具 其实现原理是黎永ES6的import会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去webpack冗长的打包时间。 安装vite npm install -g create-vite-app 利用vite创建vue3项目 create-vite-app projectName 安装依赖运行项目 cd projiectName npm install npm run dev |
四、组合API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | setup()函数 ①、setup执行时机 setup beforeCreate 表示组件刚刚被创建出来,组件的data和methods还没有初始化好 created 表示组件刚刚被创建出来,组件的data和methods已经初始化好 ②、setup注意点 -由于在执行setup函数的时候,还没有执行created生命周期方法,所以在setup函数中,是无法使用data和methods。 -由于我们不能在setup函数中使用data和methods,所以vue3.0为了避免我们错误的使用,它直接将setup函数中的 this 修改为undefined。 -setup函数只能是同步的不能是异步的。<br><br> reative ①什么是reative reactive是vue3中提供的实现响应式数据的方法。 vue2中响应式数据是通过defineProperty来实现的,而在vue3中响应式数据是通过ES6的proxy来实现的。 ②reative注意点: -reative参数必须是对象(json/array); -如果给reactive传递了其他对象 默认情况下修改对象,界面不会自动更新 如果想更新,可以通过重新赋值的方式<br><br> ref ①什么是 ref ? - ref 和reactive一样,也是用来实现响应式数据的方法。 -由于reactive必须传递一个对象,所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦,所以vue3就给我们提供了 ref 方法,实现对简单值的监听。 ② ref 的本质 - ref 底层的本质其实还是reactive,系统会自动根据我们给 ref 传入的值将它转换成 ref (xx) -》reactive({value:xx}). ③ ref 注意点: -在vue(template)中使用 ref 的值不用通过value获取 -在TS中使用 ref 的值必须通过value获取 ref 和reactive的区别 如果在template里使用的是 ref 类型的数据,那么vue会自动帮我们添加.value,如果在templatel里使用的是reactive类型的数据,那么vue不会自动帮我们添加.value。 vue是如何决定是否需要自动添加.value的? vue在解析数据之前,会自动判断这个数据是否是 ref 类型的,如果是就自动添加.value,如果不是就不自动添加.value。 vue是如何判断当前数据是否是 ref 类型的? 通过当前数据_ _v_ref来判断的,如果有这个私有属性,并且取值为 true ,那么就代表是一个 ref 类型的数据。 用户判断某个数据是什么类型的方法 isRef()、isReactive() 递归监听 默认情况下,无论是通过 ref 还是reactive都是递归监听 递归监听存在的问题:如果数据量比较大,非常消耗性能 非递归监听 调用方法 shallowRef/shallowReactive 如何触发非递归监听属性更新界面? 如果是shallowRef类型数据,可以通过triggerRef来触发。 应用场景 一般情况下我们使用Ref和reactive即可,只有在监听的数据量比较大的时候,我们才使用shallowRef/shallowReactive。 shallowRef的本质是shallowReactive shallowRef(10) => shallowReactive({value:10}) 所以如果是通过shallowRef创建的数据,它监听的是.value的变化,因为底层本质上value是第一层。 toRaw Ref/Reactive数据类型的特点:每次修改都会被追踪,都会更新UI界面,那么这个时候,我们可以通过toRow方法拿到它的原始数据,对原始数据修改就不会被追踪,这样就不会更新UI界面,这样性能就好了。 注意:如果想通过toRaw拿到 ref 类型的原始数据(创建时传入的那个数据)那么就必须明确的告诉toRaw方法,要获取的是.value的值,因为经过Vue的处理之后,.value中保存的才是当初创建时传入的那个原始数据。 markRow 经过markRow方法定义的对象被Ref/Reactive引用后无效,引用更改后不会被追踪,不会刷新UI界面。<br><br><br> toRef ref 和toRef的区别: ref ->复制,修改响应式数据不会影响以前的数据 toRef->引用,修改响应式数据会影响以前的数据 ref ->数据发生改变,界面会自动更新 toRef->数据发生改变,界面不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来,并且更新响应式数据之后还不想更新UI,那么就可以使用Ref。<br><br> toRefs toRef是将一个对象的某个属性转化为响应式数据,toRefs是将整个对象的所有属性都转化为响应式数据。 customRef 返回一个Ref对象,可以显式地控制依赖和触发响应 在组合API中使用生命周期函数,直接从vue中引入 import {onMounted} from Vue readonly 、shallowReadonly、isReadonly readOnly:用于创建一个只读的数据,并且是递归只读 shallowReadOnly:用于创建一个只读的数据,但不是递归只读的 isReadOnly:判断数据类型是否是只读数据类型 const 和readOnly的区别 const :赋值保护,不能给变量重新赋值 readOnly:属性保护,不能给属性重新赋值 vue3响应式数据本质 -在Vue2.x中通过defineProperty来实现响应式数据的 -在Vue3.x中是通过Proxy来实现响应式数据的 |
我也弄了个demo,代码如下
cdn地址:https://www.bootcdn.cn/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>demo</title> </head> <style> *{ margin:0; padding:0; border:none; } img{ width:100%; height: auto; } </style> <body> <div class = "body" > <div class = "main-body" id= "app" > <div id= "chart_example" style= "width:600px;height: 600px;" ></div> </div> </div> </body> <script src= "https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js" ></script> <script src= "https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js" ></script> <script src= "https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js" ></script> <script> const { onMounted,createApp, reactive, toRefs } = Vue; const data = reactive({ state: 12 }) const app = createApp({ setup() { const gaugeData = [ { value: 20, name: '红色预警' , itemStyle: { color: 'rgba(249, 80, 62, 1)' }, title: { offsetCenter: [ '0%' , '-45%' ], color: 'rgba(249, 80, 62, 1)' }, detail: { valueAnimation: true , offsetCenter: [ '0%' , '-30%' ] } }, { value: 40, name: '黄色预警' , itemStyle: { color: 'rgba(249, 208, 0, 1)' }, title: { offsetCenter: [ '0%' , '-10%' ], color: 'rgba(249, 208, 0, 1)' }, detail: { valueAnimation: true , offsetCenter: [ '0%' , '5%' ] } }, { value: 60, name: '白色预警' , itemStyle: { color: 'rgba(255, 255, 255, 1)' }, title: { offsetCenter: [ '0%' , '25%' ], color: 'rgba(255, 255, 255, 1)' }, detail: { valueAnimation: true , offsetCenter: [ '0%' , '40%' ] } } ]; const option = { series: [ { type: 'gauge' , startAngle: 90, endAngle: -270, pointer: { show: false }, progress: { show: true , overlap: false , roundCap: false , clip: false , itemStyle: { borderWidth: 0 } }, axisLine: { lineStyle: { width: 60 } }, splitLine: { show: false , distance: 0, length: 10 }, axisTick: { show: false }, axisLabel: { show: false , distance: 50 }, data: gaugeData, title: { fontSize: 14, height:24 }, detail: { width: 50, height: 14, fontSize: 14, color: 'auto' , borderColor: 'auto' , borderWidth: 1, formatter: '{value}%' } } ], backgroundColor: 'rgba(9,70,161,0.9)' }; const echartInit = () => { const myChart = echarts.init(document.getElementById( 'chart_example' )); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } onMounted(()=>{ echartInit() }) return { echartInit, ...toRefs(data), option } }, mounted(){ console.log( this .option) } }); app.mount( "#app" ); </script> </html> |
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)