在完成了两个使用Vue2框架搭建的项目后,我终于对Vue3.0下手了!经过学习,好像Vue3.0里面确实有些东西是有了质的飞跃~浅总结一波,简单梳理一下里面的重难点,如果你也是Vue3.0的初学者,那可以看一看哦
目录
一、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 |
注意:两种配置方式尽量不要重复,如果重复了setup中的生命周期钩子会优先执行。另外,beforeCreate和created直接体现在setup中了。
Vue3.0新增的东西太多了,一篇有点放不下,分成两篇啦,更多基础等待下篇哦,主要是computed属性和watch属性、Vue3.0的其他composition API属性~