vue3 入门

前言

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王

对比于vue2
进行了以下的优化

1.性能的提升

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

  …

2.源码的升级

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

  …

3.拥抱TypeScript

• Vue3可以更好的支持TypeScript

4.新的特性

1. Composition API（组合API）
   • setup配置
   • ref与reactive
   • watch与watchEffect
   • provide与inject
   • …
2. 新的内置组件
   • Fragment
   • Teleport
   • Suspense
3. 其他改变
   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除keyCode支持作为 v-on 的修饰符
   • 。。。

创建vue工程

在我前面写的vite入门中 介绍了 vite创建vue3项目
但是我们现在还是用脚手架来创建

接着和vue2创建的适合没什么区别

起步

我们打开main.js
发现有很多不同

我们对比vue2的配置并且分析一下

然后我们打开App.vue
发现template中没有跟标签
这是因为 在vue3中 是可以没有根标签的

Composition API

Composition API 又名组合式API
我们要知道 我们常用的vue2使用的是OptionAPI
简单的说就是我们熟悉的 data， computed ， method等等
但是在vue3中 我们并不建议使用OptionAPI

在Vue2中 我们一个功能得分不同的许多地方 比如
数据放在data中 方法放在methods中 分开的特别散乱 一两个功能还好 但是页面可能功能很多 这就会显得特别的杂乱无章
为此
Vue3 提出了 Composition API
它可以把 **一个逻辑的代码都收集在一起 **
然后单独写个hook 并引入 这样就不会到处分布

Setup

Setup是vue3中新增的一给配置项 值为一个函数
我们可以在组件的script中添加 setup
由于3.2的更新 我们不再需要return


这里我们需要注意的是

1. 尽量不要与Vue2.x配置混用
   • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
   • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
   • 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

ref函数

在我们vue2中 ref被拿来打标识 类似于id
但在vue3中 ref是作为函数来定义一个响应式的数据
语法
先引入
import {ref} from “vue”
然后使用
let（const或者var 也可以）xxx = ref(数据的初始值)

我们把ref定义的数据 叫做引用实现的实例对象
简称引用对象

语法规则如下：

• • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{ {xxx}}</div>
• 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数

方法中改变ref数据

如下
需要给引用对象加上.value

ref改变对象

reactive函数

和ref类似
但是reactive函数定义的是对象类型的响应式数据
语法
const 代理对象 = reactive （源对象）接受一个对象或者数组
返回一个
代理对象 （Proxy的实例对象 简称Pro