在坑中爬啊爬✌✌✌
前言
一、设计目标(要做成什么样的)?
今天来唠一唠3.0的设计目标,首先2.0+版本的我们可能会遇到的一些问题
- 随着项目不断迭代,功能的类加,也就意味着代码会类加,复杂组件较为繁琐
- 有很多逻辑大体相同,缺少一种机制(抽取)
- 类型推断不够友好(这个)
3.0做的
- 更小 (移除不常用API、tree-shaking)
- 更快 (编译时间更短 算法优化、静态提升、监听缓存、ssr优化)
- TypeScript支持(类型推断)
- API进行了统一
- 自身可维护性得到了提高
- 把底层的功能开放了更多出来
- 兼顾options api 利于过渡
- composition API(增加了代码的逻辑组织和复用能力)
示例:获取鼠标位置的函数
import {toRefs,reactive } from 'vue'
function useMouse(){
const state = reactive({x:0,y:0});
const update = e =>{
state.x = e.pageX;
state.y = e.pageY;
}
onMounted(()=>{
window.addEventListener('mousemove',update);
})
onUnmounted(()=>{
window.removeEventListener('mousemove',update);
})
return toRefs(state);
}
当调用这个函数时,即可获取到 x,y坐标,不用关注实现过程,当项目中引用了第三方库,我们只需调用即可。
二、优化方案
✌✌✌
- 源码
- 性能
- 语法API
源码
- 源码管理
- TypeScript
源码管理:
是通过根据功能将不同的模块拆分到packages
目录下面不同的子目录中,更细化、职责划分更明确,之间的依赖关系更加明确,更易阅读、理解和更改,提高代码的可维护性,另外一些库是可以独立于Vue使用的,例如,reactivity响应式库,如果只想使用Vue3的响应式能力,可单独依赖这个响应式库。
TypeScript
提供了更好的类型检测,能支持复杂的类型推导
2.性能
😒😒😒
是从以下几个方面进行进一步优化:
- 体积
- 编译
- 数据劫持
数据劫持:
在vue2中是通过 Object.defineProperty,有一些不足,并不能检测对象属性的添加和删除
大致结构
Object.defineProperty(data,'a',{
get(){
//
},
set(){
//
}
})
为了解决此问题,提供了 set和delete实例方法,但对于用户来说,还是增加了一定负担
同时,如果嵌套层级比较深的情况,就存在性能问题
default{
data:{
a:{
b:{
d:{}
}
}
}
}
vue3通过 proxy监听整个对象,对于删除还是监听都是可以的,在getter中取递归响应式,当真正访问到内部对象才会变成响应式,而不是无脑递归。
语法API
- 优化逻辑组织
- 优化逻辑复用
逻辑复用;
在vue2中,是通过 mixin 实现功能混合,如果多个mixin混合,会存在两个明显问题,命名冲突和数据来源不清晰
vue3中, composition API 可以将一些复用的代码抽离出来作为一个函数,只要使用的地方直接进行调用即可
示例:
import { toRefs,reactive,onUnmounted,onMounted } from 'vue'
function useMouse(){
const state = reactive({x:0,y:0});
const update = e=>{
state.x = e.pageX;
state.y = e.pageY;
}
onMounted(()=>{
window.addEventListener('mousemove',undate);
})
onUnMounted(()=>{
window.removeEventListener('mousemove',update);
})
return toRefs(state)
}
组件使用如下
import useMousePosition from './mouse'
export default{
setup(){
const {x,y} = useMousePosition()
return {x,y}
}
}
这样的方式,整个数据来源清晰,也不存在命名冲突的问题