初识VUE3

初识VUE3

    • 一、安装步骤
    • 二、VUE2和VUE3的创建变化
    • 三、vue3新特性
    • 四、Composition Api(组合式):全新的函数组合,不会影响options Api
    • 五、动机与目的
    • 六、Composition Api和options Api的区别

一、安装步骤

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 项目名称

按照个人需求进行自定义预设,以下是我的预设示例
初识VUE3_第1张图片
按空格选中需要集成的项,然后Enter
初识VUE3_第2张图片
选择3.x
初识VUE3_第3张图片
后面的预设在下图,设置好之后保存,然后就开始创建项目了
初识VUE3_第4张图片
项目创建完成后会显示出刚才创建的项目文件夹以及运行方法
初识VUE3_第5张图片
运行项目

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

初识VUE3_第6张图片

二、VUE2和VUE3的创建变化

Main.js的变化:由工厂函数createApp来创建,代码更加简洁
初识VUE3_第7张图片
集成TS后的main.ts
初识VUE3_第8张图片

App.vue的变化:不需要在最外层放置一个div来包裹
初识VUE3_第9张图片

三、vue3新特性

Vue2 普通对象没有对应的类型支持,vue3 defineComponent包裹后有类型提示,书写更加方便
初识VUE3_第10张图片初识VUE3_第11张图片
Tree-shaking支持: 没用到的代码不会被打包,使打包后的体积更小
Fragments:支持多个根节点
初识VUE3_第12张图片
Teleport传送门:用Teleport标签包裹住的模块,可以通过to=””传送到对应的模块上,支持多个模块的传送
初识VUE3_第13张图片
Custom renderer:以往代码都是渲染在DOM节点上面,Custom renderer可以将代码渲染到canvas上

四、Composition Api(组合式):全新的函数组合,不会影响options Api

Setup():入口,所有的函数都必须放在里面
响应式对象的创建,需要先定义响应式对象,然后return出去才可以使用
初识VUE3_第14张图片
定义响应式对象的方式
Ref:创建的对象,需要用ref包裹住,修改值的时候需要加.value,在HTML里面使用的时候不需要加.value,因为HTML会自动解构
初识VUE3_第15张图片
Reactive:代理对象,修改值的话可以直接调用,不需要加.value
初识VUE3_第16张图片
Readonly:跟Reactive一样,区别在于不可以被修改,相当于props的传值
初识VUE3_第17张图片
Computed计算属性:写法更加简洁
在这里插入图片描述
Watch:必须是响应式对象或者返回一个响应式对象的函数
初识VUE3_第18张图片
初识VUE3_第19张图片
在这里插入图片描述
Watch Effect:不需要指定具体的响应式对象,而是根据内部值的依赖,来观测值的变化,从而导出新的值,可以手动销毁掉侦听
初识VUE3_第20张图片
生命周期:左边是vue2的写法,右边是vue3的写法,概念是一样的,只是更改了命名,支持多个生命周期
初识VUE3_第21张图片
依赖注入:provide/inject(使用前记得要先引入)
初识VUE3_第22张图片
在这里插入图片描述
Refs用法:定义的名字要跟HTML里面ref定义的名字要对应
在这里插入图片描述
初识VUE3_第23张图片

五、动机与目的

一个功能的代码可以放在一起,代码组织性更好,抽离功能方便,复用方便
初识VUE3_第24张图片
初识VUE3_第25张图片
初识VUE3_第26张图片
Mixin用法:处理来源不清晰的问题、命名冲突问题、多次复用问题
初识VUE3_第27张图片
初识VUE3_第28张图片
toRefs:将普通对象变成响应式对象
初识VUE3_第29张图片

六、Composition Api和options Api的区别

初识VUE3_第30张图片

PS:只是本人的一些笔记,不足之处多多见谅!

你可能感兴趣的:(VUE3,vue)