关于前端:Vue30全家桶

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: 公众号（共同进步）[暂未同步]