初识VUE3

一、安装步骤

vue cli 创建

// 首先查看你的vue-cli版本号
vue -V

// 如果版本低于v4.5.12版本的话需要先升级，已经全局安装了旧版本的vue-cli需要先卸载
npm uninstall vue-cli -g

// 卸载后安装vue cli最新版本
npm install -g @vue/cli

// 升级脚手架
npm i -g @vue/cli to update

创建项目

vue create 项目名称

按照个人需求进行自定义预设，以下是我的预设示例

按空格选中需要集成的项，然后Enter

选择3.x

后面的预设在下图，设置好之后保存，然后就开始创建项目了

项目创建完成后会显示出刚才创建的项目文件夹以及运行方法

运行项目

// 选择项目文件夹
cd vue3_demo
// 运行
npm run serve

二、VUE2和VUE3的创建变化

Main.js的变化：由工厂函数createApp来创建，代码更加简洁

集成TS后的main.ts

App.vue的变化：不需要在最外层放置一个div来包裹

三、vue3新特性

Vue2 普通对象没有对应的类型支持，vue3 defineComponent包裹后有类型提示，书写更加方便

Tree-shaking支持： 没用到的代码不会被打包，使打包后的体积更小
Fragments：支持多个根节点

Teleport传送门：用Teleport标签包裹住的模块，可以通过to=””传送到对应的模块上，支持多个模块的传送

Custom renderer：以往代码都是渲染在DOM节点上面，Custom renderer可以将代码渲染到canvas上

四、Composition Api（组合式）：全新的函数组合，不会影响options Api

Setup()：入口，所有的函数都必须放在里面
响应式对象的创建，需要先定义响应式对象，然后return出去才可以使用

定义响应式对象的方式
Ref：创建的对象，需要用ref包裹住，修改值的时候需要加.value，在HTML里面使用的时候不需要加.value，因为HTML会自动解构

Reactive：代理对象，修改值的话可以直接调用，不需要加.value

Readonly：跟Reactive一样，区别在于不可以被修改，相当于props的传值

Computed计算属性：写法更加简洁

Watch：必须是响应式对象或者返回一个响应式对象的函数



Watch Effect：不需要指定具体的响应式对象，而是根据内部值的依赖，来观测值的变化，从而导出新的值，可以手动销毁掉侦听

生命周期：左边是vue2的写法，右边是vue3的写法，概念是一样的，只是更改了命名，支持多个生命周期

依赖注入：provide/inject（使用前记得要先引入）


Refs用法：定义的名字要跟HTML里面ref定义的名字要对应

五、动机与目的

一个功能的代码可以放在一起，代码组织性更好，抽离功能方便，复用方便



Mixin用法：处理来源不清晰的问题、命名冲突问题、多次复用问题


toRefs：将普通对象变成响应式对象

六、Composition Api和options Api的区别

PS：只是本人的一些笔记，不足之处多多见谅！