Vue3 - 01.vue3简介

今天我们一起来学习vue3，如果你有vue2的基础，那么学习vue3，你将会更快上手。

其实我本人是不喜欢这些理论性知识的，因为太繁琐，对于实际开发上手写代码没有什么实质性帮助，我也不做学术研究，但是为了能更深入更好地学习掌握，所以还是简单地汇总一下吧。

Vue是MVVM（Model-View-viewModel）架构，其中View表示视图层，即UI用户界面，ViewModel是业务逻辑层，即一切JS都可视为业务逻辑，Model是数据层，比如用来存储数据以及数据的处理，如常见的增删改查

我们可以打开官网文档地址去深入的学习和理解Vue，Vue3文档链接地址，如果没学过Vue的小伙伴也没关系，可以先参考学习Vue2的技术知识，Vue2文档链接地址

Vue2 和 Vue3 的区别

传统的vue2是Options Api，Vue3语法是Composition Api，传统的Vue2逻辑比较分散，可读性不好，可维护性也不好，对比Vue3语法，更加的逻辑分明，可维护性也高

Vue3 的新特性介绍

1. 重写双向数据绑定
2. VDOM性能瓶颈
3. Fragments
4. Tree-Shaking 的支持
5. Composition API

Vue2：基于Object.defineProperty()实现的

Vue3：基于Proxy实现的

Proxy和Object.defineProperty(obj, prop, desc)方式相比有以下优势：

1. 舍弃麻烦的备份数据
2. 省去for in循环
3. 可监听数据变化
4. 代码更简化
5. 可以监听动态新增的属性
6. 可以监听删除的属性
7. 可以监听数组的索引和length属性

优化VDOM

在Vue2中，每次更新diff算法，都是通过全量进行对比，Vue3则值对比带有标记的key，这样可以大大地减少非动态内容的对比消耗

同样我们可以打开 Vue Template Explorer 进行比较和查看

Vue3 Fragment

Vue3 允许我们创建多个根节点

<template>
    <div>123</div>
    <div>456</div>
</template>

并且还支持 render 的 JSX语法，这个后期我们会着重的学习。

同时新增了 Suspense 和 多 v-model 语法

Vue3 Treeshaking

简单地来讲，这个的作用就是保持代码运行结果不变的前提下，去除无用的代码

Vue3源码引入Treeshaking特性之后，会将全局API进行分块，如果不使用其中的某些功能，他们将不会包含在你的基础包中，举个例子，假如你要用watch，在页面中引入 import { watch } from "vue" 其他的computed没用到就不会给你打包，从而减少体积。

Vue3 Composition API

Setup 函数式编程，也叫vue hook。setup是所有Composition API的容器，值为一个函数，组件中所用到的数据，方法等等，均要配置在setup中，他会在beforeCreate之前执行一次，值得注意的地方是，Vue3里的this不再是指向vue的实力，当我们访问this的时候，this会是undefined。

Vue3的一些新特性

尽量不要和Vue2配置混合

1. setup

setup不能是一个async函数，以为返回值不再return一个对象，而是一个promise，模板看不到return对象中的属性（后期也可以返回一个promise实例，但是需要Suspense和异步组件的配合）

2.ref创建响应式数据

3.reactive创建响应式数据

4.computed计算属性

和vue2的用法一样

5.watch监听

和vue2的watch配置功能一样，只是语法有些改动

6.watchEffect 监听回调

7.生命周期函数的变动

Vue2	Vue3
beforeCreated	setup
created	setup
beforeMounted	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	beforeUnmount
destroy	unmounted
beforeUnmount	onBeforeUnmount
unmanned	onUnmounted

setup() {
    onMounted(() => {
      console.log('mounted')
    })
}

8.toRef 创建ref

9.toRefs 响应式转换

10.shallowReactive

11.shallowRef 基本数据响应式

12.readonly 响应式变只读

13.shallowReadonly 响应式变只读

14.toRaw 标响应式变非响应式

15.markRaw 标记永远不响应式

16.customRef 依赖更新控制

17.provide & inject 通信

18.响应式数据判断

18.1，isRef

检查一个值是否为一个 ref 对象

18.2，isReactive

检查一个值是否为一个 isReactive 对象

18.3，isReadonly

检查一个对象是否由 readonly 创建的只读代理

18.4，isProxy

检查对象是否由reactive或readonly创建的proxy

19.teleport移动dom组件

20.Suspense 异步渲染组件

21.全局API调整

22.移除API

23.Ref获取DOM

23.1，单个ref

23.2，循环中的ref

24.emits 自定义事件

25.$nextTick 异步更新

26.hook 生命周期事件

以上就是vue3大概的简介，后期根据学习还会继续补充每一个api对应的例子

本文为作者原创，举报者无耻