vue3视频学习笔记

Posted 2021-10-26 十九万里

一、vue3.0基础

vue3.0目前是国内最火的开发框架，2020.9.18发布vue3.0正式版

目前支持vue3.0的ui组件库：

ant-design-vue element-plus vant等

学习的路线主要是vue3.0文档

二、vite的使用

vite是一个原生ESM驱动的web开发构建工具，在开发环境下基于浏览器原生ES inports开发

可以用于快速构建vue3的工程化项目环境

1、vite的基本使用

npm init vite -app 项目名称
cd  项目名称
yarn
yarn dev
浏览器输入地址，启动项目

vite创建的项目结构其实和cli项目其实是差不多的，所以这里我就不重复写了。

注：template组件vue3.0中支持多个根组件。main.js中的作用是使用App.js作为根组件 渲染index.js

视频中前面的部分的部分比较基础 我就没做笔记了，直接做了后面部分的

三、Composition API（组合式API)

1、vue2采用的是optionsAPI

优点：易于学习和使用，每个代码都有着明确的位置（例如：数据放在data中，方法放methods中）

缺点：相似的逻辑 不容易重复使用，在大的项目中尤为明显

虽然optionsAPI可以通过mixins提取系统的逻辑，但是也不是特别好维护

2、vue3新增的就是compositionAPI

compositionAPI是基于逻辑功能组织代码的，一个功能和一个api相关放到一起

即使项目大了，功能增多了，也能快速定位相关功能的api

大大提升了代码可读性和可维护性

3、vue3.0推荐使用compositionAPI。同时也保留了optionsAPI

四、setup函数

1、setup函数是一个新的组件选项，作为组件中compositionAPI的起点

2、从生命周期角度来看，setup会在beforeCreate钩子函数之前执行

3、setup中不能使用this，this指向是underfined

五、reactive函数

作用：将复杂类型，转化成响应式类型对象

注：

1、setuo需要返回值，返回的值才能在模板中使用

2、默认普通的对象，不是响应式的

reactive函数接受一个普通的对象，可以返回改对象的响应式代理（proxy处理过）

注：vue3.0的话一开始都要先写一个setup函数

需要注意的一些问题：

1、setup需要返回数据，setup中返回的数据才能在模板中使用

2、默认对象如果不做处理就直接返回不是响应式的

3、如果希望返回的数据时响应式的，需要使用reactive函数去包裹处理

reactive传入一个对象，可以得到一个呗proxy处理过的袋里对象

六、ref函数

作用：把简单类型数据，转化成响应式的

1、ref函数接受一个简单类型的值 ，返回一个可改变的ref响应对象，返回的对象有唯一的属性value

2、在setup函数中，通过ref对象的value属性，可以访问到值

3、在模板中，ref属性会自动解套，不需要调用额外的.value

4.如果ref接受的是一个对象，会自动调用reactive

七、toRefs函数

作用：把一个响应式对象转化成普通对象，该普通对象的每个property都是一个ref

1、reactive的响应式功能是赋值给对象的，如果给对象解构或者展开，会让数据丢失了响应式的能力

2、使用toRefs可以保证该对象展开的每个属性都是响应式的。