Vue3+TS+vite学习笔记(持续更新 一起学习)
vue3的新特性
- 重写双向数据绑定
- VDOM性能瓶颈
- Fragments
- Tree-shaking
- Composition API
重写双向数据绑定
vue2
基于Ojbect.defineProperty() 做属性的劫持
vue3
基于Proxy
对比
// 丢掉麻烦的数据备份
// 省去for in 循环
// 可以监听数组变化
// 代码更简化
// 可以监听动态新增的属性
// 可以监听删除的属性
// 可以监听数组的索引和 length 属性
优化Vdom
在vue中,每次更新diff,都是全量对比,vue3则只对比带有标记的,这样减少了非动态内容的对比消耗
patch flag
动态标记 动态的值 只对标记的 text 进行对比 减少了性能优化
Fragments
<template>
<div>12</div>
<div>23</div>
</template>
支持render JSX 写法
render() {
return (
<>
{this.visable ? (
<div>{this.obj.name}</div>
) : (
<div>{this.obj.price}</div>
)}
<input v-model={this.val}></input>
{[1, 2, 3].map((v) => {
return <div>{v}-----</div>;
})}
</>
);
},
Tree shaking
简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码
在Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到
而Vue3源码引入tree shaking特性,将全局 API 进行分块。如果你不使用其某些功能,它们将不会包含在你的基础包中
就是比如你要用watch 就是import {watch} from ‘vue’ 其他的computed 没用到就不会给你打包减少体积
Composition API
Setup 函数式编程 也叫 vue Hook
- vue2:使用 Options API 整体逻辑比较分散 可读性差 可维护性差
- vue3:使用 Composition API 逻辑分明
可维护性高
虚拟DOM
虚拟DOM就是通过JS来生成一个AST节点树