vue3的源码已经开放很久了,官网也火速出了新文档。但奈何我的速度总是能和蜗牛相比。正好,最近有做到vue3的项目。那我来写一篇 “用后感”
吧!把项目中学习到的关于vue3的理解分享给大家。
这里做一个简单的归纳,个人认为vue3中值得大家注意的点:
- 1、数据拦截机制的变更
- 2、组合API的引入
- 3、setup函数带来的一系列惊喜
- 4、响应式API的宽泛应用
一、数据拦截机制的变更
vue2 通过 Object.defineProperty() 方式来截持数据的变更。而在升级为 vue3 之后,作者不再借助 Object.defineProperty 来劫持数据,而是通过 es6 的新特性 proxy
来劫持数据。因为在 vue2 中,响应式数据需要通过 data() 初始化预先定义好,但是在 vue3 之后,data 中的数据不再进行响应式追踪,而是将它转化为proxy
代理再进行追踪更新。
注意
: 在vue3中,它将任何在data()函数中定义的数据,会使用getter或setter遍历所有的property,将其转化成proxy代理。
二、组合API的引入
vue3中最大的改变还是compositionApi的引入,这是vue3中的最核心的部分。
包括以下几方面:
- a、setup函数
下一节有详细介绍,这里就不赘述了。
- b、生命周期钩子
vue3抛出了全局的API,通过引入
onX
的形式,使setup函数中支持钩子函数的调用。
- c、provide/Inject
vue3 中也支持在 setup 函数中使用 provide和inject,只要在对应的位置引入即可:
import { provide } from 'vue'; setup(){ provide(name, 'hello!'); } import {inject} from 'vue'; setup(){ inject('name', [default-value]: string); }
- d、getCurrentInstance
支持在setup函数中访问自己的实例
import { getCurrentInstance } from 'vue'; setup() { const internalInstance = getCurrentInstance(); }
三、setup函数带来的一系列惊喜
在vue3中,setup函数的引入,这种函数式的开发方式,很好地将代码整合到一起。
- 在vue2中,data数据需要在使用的时候调用this访问,现在vue3中使用reactive,ref来设置响应式数据。
data() { return { name: 'aaa', }; } => const name = ref('aaa'); 就像简单的定义变量一样,使用ref就可以为变量初始化
- setup函数取代了methods的函数定义方式,我们可以选择性地对外暴露我们定义的函数。在methods的函数,都绑定到了this上,
this得有多累啊 (> 3 >)
,很好地保护了我们自己定义的私有变量。
methods: { function unkouwnFunc() { console.log(3333); } }, => setup () { function unkownFunc() { console.log(3333); } return { unkownFunc, // return之后,该函数绑定到了组件实例上,可以在模版中直接使用 }; }
- 关于setup函数中使用emit事件
import { SetupContext } from 'vue'; emits: ['eventName'], setup(props, ctx: SetupContext){ ctx.emit('event-name', value); }
- 另外作者为了支持setup函数,向外抛出了全局的生命周期钩子,只在setup函数中使用有效。
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'; setup() { onBeforeMount() { your code } onMounted () { your code } onBeforeUpdate() { your code } onUpdated() { your code } onBeforeUnmount() { your code } onUnmounted() { your code } }
四、响应式API的宽泛应用
-
Ref和reactive API带来的便利
vue3中的 ref的reactive 非常非常的好用,为什么这么说?因为vue在这里直接给出了他的全局API。不管在任何场景下,我们都可以直接引入,并创建这个响应式的数据。通过导入,导出,实现代码的
集中化管理
。所谓
集中化管理
, 在这里指的是代码的运用灵活度提升了,vue2中,使用store来集中管理状态,而现在,我们可以直接真正抛弃store了。因为vue3的响应式API 给我们带来了非常nice的体验。
>> state.js export function useCount () { const count = ref(0); setCount (newv = 0) { count.value = newv; } return { count, setCount, }; } => import {useCount} from 'state.js'; setup() { const { count } = useCount(); }
- 关于computed和watch在setup函数中的使用
computed: { aaa() => { return 333 } }, watch: { bbb(newv, oldv) { console.log(newv, oldv); } }, } => import { computed, watch } from 'vue'; const aaa = computed(() => { return 333; }) const bbb = watch();