在坑中爬啊爬✌✌✌
前言
一、设计目标(要做成什么样的)？
今天来唠一唠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}
}
}
这样的方式，整个数据来源清晰，也不存在命名冲突的问题
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163320.html
