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 ...
随机推荐
- Python_json类方法
Python_json类方法 import requests import json headers = { "User-Agent": "Mozilla/5.0 (Li ...
- 统一日志输出打印POST请求参数
众所周知,request.getInputStream()只能调一次.如果希望在请求进入Controller之前统一打印请求参数(拦截器或过滤器),又不影响业务,我们只能将获取到的输入流缓存起来,后续 ...
- 「源码分析」CopyOnWriteArrayList 中的隐藏的知识，你Get了吗？
点赞再看,动力无限.Hello world : ) 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. 前言 ...
- Redis原理再学习02：数据结构-动态字符串sds
Redis原理再学习:动态字符串sds 字符 字符就是英文里的一个一个英文字母,比如:a.中文里的单个汉字,比如:好. 字符串就是多个字母或多个汉字组成,比如字符串:redis,中文字符串:你好吗. ...
- Xray安全评估工具使用
xray 是一款功能强大的安全评估工具,主要特性有: 检测速度快.发包速度快; 漏洞检测算法高效. 支持范围广.大至 OWASP Top 10 通用漏洞检测,小至各种 CMS 框架 POC,均可以支持 ...
- .net core6 Autofac依赖注入
一.引言 .net core6在文件方面是精简了,所以配置方面也发生了部分变化:下面记录下.net core6中怎么配置Autofac 进行依赖注入. 二.项目创建 1).首先引用两个包:在Nuget ...
- ASP.NET 读取FTP文件流
参考资料 ASP.NET 上传文件到共享文件夹 工具类代码 /// <summary> /// 读取ftp文件流 /// </summary> /// <param na ...
- Python函数每日一讲 - 一文让你彻底明白hasattr函数的使用
引言 在Python编程中,经常会遇到需要判断对象是否具有某个属性的情况.这时候就可以用到Python内置函数 hasattr().本文将深入探讨 hasattr() 函数的使用方法及其在实际编程中的 ...
- 第124篇: 期约Promise基本方法
好家伙,本篇为<JS高级程序设计>第十章"期约与异步函数"学习笔记 1.异步编程 同步行为和异步行为的对立统一是计算机科学的一个基本概念. 特别是在 JavaScr ...
- 在 C++ 项目中，通过源码使用 PaddlePaddle 实现 OCR 功能
My-PaddleOCR 介绍 如何在 C++ 项目中,通过源码使用 PaddlePaddle 实现 OCR 功能. 本项目的所有源码:gitee: paddleocr 目前,官方提供使用 Paddl ...