Vue3.0 笔记

五一假期看了下文档，整理下；Vue3文档地址：v3.cn.vuejs.org/api/

如果有vue2基础，学习vue3还是很快的对原理理解也能快点。我的笔记主要是供我自己大概看下~ 讲真还是看文档比较详细点，尤其是Composition API那块包含了很多知识点需要好好理解；

webpack 搭建了个脚手架，webpack 主要是那几个方面入手配置时候，基本配置。高级配置。打包优化，以及产出代码方面；大概构建编译流程了解即可。

变动是: beforeDestory 改为beforeUnmount

destoted 改为 unmounted;

**其它的不变；
**

Composition API带来了更好的代码组织，逻辑复用，类型推导。而

OptionApi 代码组织比较分散；

两者使用场景不同：

首先不建议共用，会比较混乱。

如果是小型项目，业务逻辑简单，用Options API。

中大型项目，逻辑复杂，用 Composition API；Composition API本就是为解决复杂业务逻辑而设计，就像Hooks 在React中地位。

Composition API 中setup只会被调用一次，无需返回useMemo useCallback;只调用一次也不用考虑调用顺序；

React Hooks 需要多次调用，需要保证hooks顺序一致。

使用时候需要import 导入这几个方法；

import {ref, toRef, toRefs, reactive} from 'vue'

**ref： ** 可以生成值类型响应会数据；用于模板和reactive;通过.value修改值

toRef: 针对一个响应式对象上的property，创建一个ref,具有响应式。两者保持引用关系。

toRefs: 这个方法可以将reactive响应式对象，转化为普通对象，保证了reactive每个属性还是响应式的，可以把每个属性进行分解使用，组件使用中就不用obj[属性]或者obj点出来。

Vite就是一个前端打包工具，vue作者发起项目。因此影响力比较大，发展比较快。和webpack竞争。

优势:开发环境下无需打包，启动快；（开发环境下使用ES6 module.，无需打包，非常快）

生产环境使用rollup,并不会快很多；

vite 开发环境下使用ES6 module.，无需打包，非常快;

webpack 需要进行模块化打包，编译；在webpack中一切皆模块，module就是各个源码文件，chunk是它分析过程中入口文件，需要进行依赖分析，分析出多个模块依赖输出；而bundle就是chunk最终输出。