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. 编译性能比vue2.x快1.2~2倍。
2. 按需编译，体积比vue2.x更小。
3. 支持组合API(类似与React hook).
4. 更好的TS支持。
5. 暴露了自定义渲染API。
6. 使用更先进的组件。
二、vue3.0如何变快的？
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. 创建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
setup()函数
①、setup执行时机
setup
beforeCreate 表示组件刚刚被创建出来，组件的data和methods还没有初始化好
created 表示组件刚刚被创建出来，组件的data和methods已经初始化好
②、setup注意点
-由于在执行setup函数的时候，还没有执行created生命周期方法，所以在setup函数中，是无法使用data和methods。
-由于我们不能在setup函数中使用data和methods，所以vue3.0为了避免我们错误的使用，它直接将setup函数中的this修改为undefined。
-setup函数只能是同步的不能是异步的。
reative
①什么是reative
reactive是vue3中提供的实现响应式数据的方法。
vue2中响应式数据是通过defineProperty来实现的，而在vue3中响应式数据是通过ES6的proxy来实现的。
②reative注意点：
-reative参数必须是对象（json/array）;
-如果给reactive传递了其他对象
默认情况下修改对象，界面不会自动更新
如果想更新，可以通过重新赋值的方式
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界面。
toRef
ref和toRef的区别：
ref->复制，修改响应式数据不会影响以前的数据
toRef->引用，修改响应式数据会影响以前的数据
ref->数据发生改变，界面会自动更新
toRef->数据发生改变，界面不会自动更新
toRef应用场景：
如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新UI，那么就可以使用Ref。
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/
<!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>
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
vue3.0 demo代码记录的更多相关文章
- Vue3.0常用代码片段和开发插件
Vue3 Snippets for Visual Studio Code Vue3 Snippets源码 Vue3 Snippets下载 This extension adds Vue3 Code S ...
- [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示
因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...
- 从零搭建vue3.0项目架构（附带代码、步骤详解）
前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- RAD Studio 10 自带Demo代码汇总说明
大家好,好多朋友来信咨询Delphi和C++Builder的移动开发.DataSnap架构等问题,希望能有Demo代码学习.其实Delphi和C++Builder本身自带有很多示例代码,已经覆盖了大部 ...
- unity3d入门 Demo 学习记录
闲来学习一下 unity3d 的Demo,记录如下. 官方 Demo,名字为 Roll-A-Ball,如图 场景比较简单,包含地面.玩家精灵.主摄像机.墙壁.可拾取的方块.分数为示 text.平行光源 ...
- 通过10个实例小练习，快速熟练 Vue3.0 核心新特性
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...
- Vue3实战系列：Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...
- Vue3.0 响应式数据原理：ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面
一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...
随机推荐
- 从零开始的react入门教程（九），react context上下文详解，可能有点啰嗦，但很想让你懂
壹 ❀ 引 我在从零开始的react入门教程(八),redux起源与基础用法一文中,介绍了redux的前辈Flux,以及redux关于单项数据更新的基本用法.我们在前文提到,相对Flux支持多个sto ...
- Typora关于 插入图片 居中 靠左 靠右设置
style="float: left;" <img src="C:\Users\mlx\AppData\Roaming\Typora\typora-user-ima ...
- Spring Boot图书管理系统项目实战-7.借阅图书
导航: pre: 6.图书管理 next:8.续借图书 只挑重点的讲,具体的请看项目源码. 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.页面设计 2.1 bookBorrow ...
- win32 - EnumDisplayDevices和EnumDisplayMonitors的使用
EnumDisplayDevices枚举适配器 EnumDisplayMonitors枚举监视器 #pragma comment(lib, "dxva2.lib") #includ ...
- Frida 原理
frida注入的主要思路: 1.找到目标进程,使用ptrace跟踪目标进程 2.获取mmap,dlpoen,dlsym等函数库的偏移 3.获取mmap,在目标进程申请一段内存空间,将在目标进程中找到存 ...
- less变量书写及样式混入
定义变量 定义混入样式 变量及混入样式使用 样式文件中 ~@代表src
- 在Vue中使用Canvas绘制背景
好家伙, 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别 法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到canca ...
- 【Azure 事件中心】使用Apache Flink 连接 Event Hubs 出错 Kafka error: No resolvable bootstrap urls
问题描述 参考Github上 Event Hub的示例代码(Using Apache Flink with Event Hubs for Apache Kafka Ecosystems : https ...
- 【Azure 环境】如果Azure中的某一个资源被删除后是否可以查看到删除的记录呢？如Resource Group
问题描述 当一个资源从Azure中删除后,是否有地方可以查看到这些操作的记录呢?如操作人,操作时间等. 问题解答 可以的.通过 Azure订阅页面的活动日志,可以查看所有对订阅下资源的操作记录,包含D ...
- C# 操作国产数据库之【 人大金仓 】之四大模式
人大金仓优点 人大金仓是国产最主流ORM之一 具有和PgSql一样强悍的性能,同时人大金仓支持了四种数据库模式 : Oracle.PgSql.MySql和SqlServer ,假如你们系统有多种数据库 ...