Vue3.0全家桶

https://v3.cn.vuejs.org/guide...
1: Vue3的新特性 & Compiler原理 & 扩展？

*   性能提升反面显著提高1.3~2.x倍 
*   mount提升50%, 内存占用小120% 
*   核心代码 + Composition API: 13.5kb , 最小11.75kb
*   所有的Runtime: 22.5kb (Vue2: 32kb)

1.1：为什么会有这么高的性能提升？

静态的Node不再做更新处理，包括静态Node绑定的class、id
[Vue在mount的过程中template会编译成AST语法树，它会给内容动态的打上一个patchFlag，在打包或编译的过程中会对内容进行动态和静态的分析，根据动态的内容去做一个动态的处理]

事件的监听器Cache缓存处理cacheHandlers
[比方说在组件上定义自定义事件，在组件重复渲染的过程中它不会多次实例化，对内存的优化是非常好的，这非常像是一种享元模式(机构化的一种设计模式，主要就是通过减少创建对象的数量，以减少内存的一个占用，提高性能)]

1.2: 响应式原理？

*    Proxy替代了Object.defineProperty()
*    Proxy对象用于定义基本操作的自定义行为(如属性查找、赋值、枚 举 函 数调用等）
*    拦截功能、提供对象的访问、可以重写属性或者构造函数

比较Vue2原理：

1.  将一个普通的javascript对象传入Vue的data选项，Vue将遍历此对象的所有property，并且Object.defineProperty将这些属性转换为getter/setter
2.  Object.defineProperty是es5无法shim的一个特性, 所以Vue不支持ie8以及版本更低的浏览器
3.  getter/setter能让Vue 实现追踪依赖，在property在访问和修改的时候能够通知变更
4.  每一个实例组件都对应一个wacther实例， 它在组件渲染的过程中， 把接触过的数据property记记录为依赖， 之后当依赖项的setter触发时， 会通知watcher, 从而使它所关联的属性重新渲染
5.  遍历 

  1.3:  Composition API？

*    setup (props, ctx) { return {} }
*   props是响应式的， 不能使用es6进行解构，否则会丧失响应式可以借助于const { title } = toRefs(props)
*   ctx 是可以解构的, { emit, attrs, slots }

    比较Vue2

1.  Vue2对于复杂的逻辑组件，在后期变得越来越难以维护，逻辑拆分为components、props、data、computed、methods等生命后期方法
2.  Vue2中代码复用方法，比如Mixin、Filter有一定的缺陷，包括命名空间的冲突、逻辑的混入、配置项繁多、代码分裂、性能差等
3.  Vue2对Ts支持不充分，Vue3已经上升到框架层面，全局提高代码的质量
4.  有this的牵绊，抽离起来会很难办，不能很好的达到逻辑的复 

  1.4:新增特性？
   Fragment、Teleport、Suspense

suspense.vue 重点介绍
<template>
 {{ msg }}
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
 async setup () {
 // eslint-disable-next-line
    const promise: Promise<string> = new Promise((resolve, reject) => {
 setTimeout(() => {
    resolve('success message')
 }, 2000)
 })
 const msg = await promise
 console.log('msg' + msg)
 return {
 msg
 }
 }
})
</script>

<template>
​
 <Suspense>
 <template #default>
 <User />
 </template>
 <template #fallback>
 loading
 </template>
 </Suspense>
​
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import User from './views/suspense.vue'
export default defineComponent({
 name: 'App',
 components: {
 User
 }
})
</script>

1.5: reactive？

*    返回[对象]的响应式副本(返回的响应式副本里面的数据是[深度响应式]，即递归监听对象的所有属性) & (shallowReactive 非深度响应式，响应式一级)
*   reactive 包裹的对象返回是Proxy对象，reactive实现原理是基于es5 Proxy的实现的 
*   reactive 传入的如果是[非对象]的话，则原始之不会被包装，也没有响应性的特点
*   【建议使用响应式Proxy，避免依赖原始对象】

1.6:  生态？
  Vuex API基本没变化....

import { createStore, createLogger } from 'vuex'
const debug= Process.env.NODE_ENV !== 'production'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
},
plugin: debug ? [createLogger()] : []
})

  1.7: Vue3环境搭建?
    vue create project-name

 1.8： 生命周期详细比较？

1.9: vite(扩展)？
    npm init vite-app project-name

*   初始化的速度特别快
*   可以直接引入ts类型的文件
*   使用npm run dev 会起启动一个http server, 跳过甚至没有编译的这么一个过程(冷启动)

    1.9.1: 启用ts ?

1.  拷贝 v3的tsconfig.json 到 项目根目录 , 并设置"isolatedModules": true       
2.  拷贝v3的shims-vue.d.ts 到 src 目录下
3.  修改 main.js => main.ts  & html 文件的引入后缀
4.  组件内部使用<script lang="ts>

1.9.2: 启用scss?

1.    yarn add  -D sass
2.     <style lang="scss>

  1.9.3: 启用router?

1.  yarn   add  vue-router  

1.9.4: 其他同理...
2:  旧项目升级

*   小规模尝试，小项目尝试
*   Vue2.0如果趋于稳定，【不推荐】更新

3: 项目demo
https://github.com/jiankang-w...
4: 公众号（共同进步）