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>
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
