Vue3.0的设计目标、做的优化有哪些?

在坑中爬啊爬✌✌✌

前言

一、设计目标(要做成什么样的)？

今天来唠一唠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}
	}
}

这样的方式，整个数据来源清晰，也不存在命名冲突的问题