Vue3+TS+vite学习笔记(持续更新 一起学习)

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节点树