Vue3.0入门（上）

最新推荐文章于 2024-07-07 21:49:13 发布

X-77

最新推荐文章于 2024-07-07 21:49:13 发布

阅读量2k

点赞数 3

分类专栏：前端进步亿点点文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_45990864/article/details/124254749

版权

前端进步亿点点专栏收录该内容

34 篇文章 7 订阅

订阅专栏

在完成了两个使用Vue2框架搭建的项目后，我终于对Vue3.0下手了！经过学习，好像Vue3.0里面确实有些东西是有了质的飞跃~浅总结一波，简单梳理一下里面的重难点，如果你也是Vue3.0的初学者，那可以看一看哦

一、Vue3.0带来了什么？

二、Vue3.0的新特性

1.Composition API（组合API）

一、Vue3.0带来了什么？

一个版本的升级必然是优化了原来的版本，那么相较于Vue2，Vue3.0给我们带来了以下的优化：

1.性能的提升

2.源码的升级

3.拥抱TypeScript

4.新的特性

前面的三点，感受并不是特别突出，但是Vue3.0的新特性，是我们在学习过程中的重难点，一定要重点关注，重点感受哦。

二、Vue3.0的新特性

1.Composition API（组合API）

在Vue2中我们使用的是Options API，即配置项API，使用这种方法对数据、方法等进行配置会存在一定的问题。于是在Vue3.0中，提出了一个新的概念是Composition API，即组合API。将所有的数据、方法等放入setup中，即组合API的入口函数。

配置项API存在的问题：当开发代码数据过长时，不方便查找某个功能对应的数据、方法或其他生命周期钩子所在的位置，可能需要通篇阅览。
组合API的优势：可以将每个功能需要的数据、方法等内容放在一块，或者使用hook函数，在setup中使用即可，需要修改时，直接找到对应的hook函数修改即可。

2.拉开序幕的setup

2.1 setup的基础介绍

setup作为组合API的入口函数，是所有组合API“表演的舞台”。组件中所有用到的数据、方法都定义在setup里面。

setup函数的两种返回值：

1.若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。

2.若返回一个渲染函数：则可以自定义渲染内容。

2.2 setup的注意点

使用上：

1.尽量不要与Vue2.x配置混用。Vue2中的配置项能访问到setup中的属性和方法，但是在setup中不能访问到Vue2.x中的配置（data、methos、computed.…）

2.如果混用有重名，setup优先

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

4.setup在beforeCreate之前执行一次，this是undefined。

参数上：

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

slots: 收到的插槽内容, 相当于 this.$slots。

emit: 分发自定义事件的函数, 相当于 this.$emit。

3.Ref函数与Reactive函数

3.1 Ref函数：

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)

    import {ref} from 'vue'
    setup(){
        let sum = ref(0)
    }

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

3.2 Reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

    import {reactive} from 'vue'
    setup(){
        let car = reactive({name:'张三',age:20})
    }

reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

3.3 Vue3.0中的响应式

我们知道，在Vue2中，实现响应式的原理主要是通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持），即使用了get()和set()。但是存在新增属性、删除属性时界面不会更新的问题，同时在Vue2中不支持通过数组下标修改数组内容。在Vue3.0中，这些问题的得到了解决。

在Vue3.0中，主要是通过了Proxy（代理）和Reflect（反射）来实现响应式的。

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

通过Reflect（反射）: 对源对象的属性进行操作。

3.4 ref和Reactive的对比

	Ref	Reactive
定义数据	基本数据类型	对象（或数组）类型数据
原理	`Object.defineProperty()的get和set`	proxy实现响应式（数据劫持)；reflect操作源对象内的数据
使用角度	操作需要.value，读取不需要	操作与读取均不需要.value

注意：ref也可以定义对象（或数组）类型数据，但是内部会自动转为reactive代理对象。

4.Vue3.0的生命周期

在前面介绍过Vue2中的生命周期，其实在Vue3.0中，生命周期大致和Vue2差不多，只是有细微的改变。因为篇幅的原因，只截取了Vue3中改变的部分作为对比展示。

这里可以看出来优化了创建vm实例对象时的判断条件，避免走完两个生命周期钩子后实例不存在的情况。

这里可以看到，在最后两个生命周期钩子中，beforeDestroy改成了beforeUnmount，destroyed改成了unmounted，更好的与beforeMount与Mounted相呼应。

另外，在vue3.0中，所有的生命周期钩子不仅可以像Vue2中那样使用配置项配置，也可以使用Composition API进行配置，不过要注意其名字的变化！

配置项配置	composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
update	onUpdate
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted