Vue3自我理解及实战首先要了解下Vue3的新特性啦，那就借尤雨溪介绍的Vue3的亮点，做一个简单的自我理解。（1）、

最近vue3如火如荼，尤雨溪也说差不多在8月会公布最新版，那就趁着这股浪潮，来学习学习下vue3吧～

一、Vue3的新特性及其理解

首先要了解下Vue3的新特性啦，那就借尤雨溪介绍的Vue3的亮点，做一个简单的自我理解。
Vue3亮点有这些

1、Performance 性能

（1）、Rewritten virtual dom implementation: 重写虚拟dom的实现。这个具体怎么表现呢？首先看编译模版的静态标记：

【1】、 vue3 中动态属性会有第四个参数，代表是变化的，只有识别到这个才会被追踪，而静态属性不需要被遍历到，所以提高了性能。
【2】、 vue2中静态属性和动态属性都用_c新建成vdom, 所以在diff的时候都需要对比，就有额外的一些性能损耗。
【3】、那第四个属性的数字代表什么呢？看下源代码

export const enum PatchFlags {
 TEXT = 1,// 表示具有动态textContent的元素
 CLASS = 1 << 1,  // 表示有动态Class的元素
 STYLE = 1 << 2,  // 表示动态样式（静态如style="color: red"，也会提升至动态）
 PROPS = 1 << 3,  // 表示具有非类/样式动态道具的元素。
 FULL_PROPS = 1 << 4,  // 表示带有动态键的道具的元素，与上面三种相斥
 HYDRATE_EVENTS = 1 << 5,  // 表示带有事件监听器的元素
 STABLE_FRAGMENT = 1 << 6,   // 表示其子顺序不变的片段。 
 KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。
 UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段
 NEED_PATCH = 1 << 9,   // 表示只需要非属性补丁的元素，例如ref或hooks
 DYNAMIC_SLOTS = 1 << 10,  // 表示具有动态插槽的元素
}

这就明白了，代表着不同类型。同时如果两者都有的话，就会按位与运算进行整合，如下面源代码

 export const PLUGIN_EVENT_SYSTEM = 1;
 export const RESPONDER_EVENT_SYSTEM = 1 << 1;
 export const USE_EVENT_SYSTEM = 1 << 2;
 export const IS_TARGET_PHASE_ONLY = 1 << 3;
 export const IS_PASSIVE = 1 << 4;
 export const PASSIVE_NOT_SUPPORTED = 1 << 5;
 export const IS_REPLAYED = 1 << 6;
 export const IS_FIRST_ANCESTOR = 1 << 7;
 export const LEGACY_FB_SUPPORT = 1 << 8;

2、Tree shaking
- 按需导入的原则
3、TypeScript support
- 自动的类型定义提示。这个主要表现在使用defineComponent这个方法或其他方法的时候，会自动帮你提示有对应的方法

    export default defineComponent({
    	render() {
        }
    })

4、Fragment
- 这个的意思是，原先我们是在template中要用一个大的div包裹，现在不用了，可以多个div并列，这个我觉得挺好的，就是我们有很多组件的时候也可以多个组件并列放，不用一个大的div包裹。如下图从左->右的变化。
5、Composition API(组合API)
- 更好的逻辑复用与代码组织，有点类似于React Hook。在vue2及以前，是将方法分布到对应的方法中，在Composition API中就则可以让你将同个联系，共同方法组合起来。之前是
6、Custom Renderer API(自定义渲染器)
- 这个api使得开发更加地灵活了。比如我就用api接口做了个canvas动画。 git地址以下是自己写Render函数。
7、接下来是vue3的API：

import {
	createApp,  // 创建app
    reactive,   // 接收一个普通对象 返回一个响应式数据对象
    ref,        // 将给定的值(确切的说是基本数据类型 int 或 string)创建一个响应式的数据对象
    toRefs,     // 可以将reactive创建出的对象展开为基础类型
    isRef,      // 判断一下是不是ref生成的响应式数据对象
    computed,   // 创建计算属性
    watch,      // 定义监听器
    onMounted,  // 挂载到dom之后
    onUpdated,  // 更新之后
    onUnmounted,// 销毁之后
    effect      // 副作用函数，响应式对象修改会触发这个函数
    computed    // 计算属性
} from 'vue'

8、生命周期的变化

Vue2	Vue3
beforeCreate	setUp
created	setUp
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

9、vue-router/vuex使用的变化

createApp(App).use(router).use(store).mount('#app')

二、Vue3实战

使用vue3开发的飞机大战，实现自定义的Render API飞机大战
看vue3源码写的mini-vue3:mini-vue3

Vue3自我理解及实战

一、Vue3的新特性及其理解

二、Vue3实战

三、资料附录