Vue 3.0 的性能提升
-
响应式系统升级
vue2中使用Object.defineProperty来做数据拦截,在初始化时会遍历对象所以属性,如果属性是对象就递归遍历,是一个相对比较昂贵的操作
vue3中用es6的Proxy来做数据拦截,会在目标对象之上架了一层拦截,代理的是对象而不是对象的属性,如果属性是对象也只是在访问到时才会进行Proxy操作,不需要对原始对象做太多操作
-
编译优化
vue2中将模板编译成render函数,编译静态节点和静态根节点,发生变化通知watcher,触发update,更新虚拟DOM,执行diff算法;会标记静态根节点,diff时跳过,但仍然会对比静态节点
vue3中会对静态节点进行标记和提示,会将静态节点提升缓存起来,下一次diff时用到就直接使用创建好的静态节点;对于动态节点会进行标记,标记出动态节点动态的内容,方便diff时找到需要对比的内容;会缓存事件处理函数,将处理函数的绑定缓存起来,节省事件重复绑定,变化处理函数时,只需要修改绑定函数里面的调用就可以了
-
优化打包体积
vue3移除了一些不常用的API,并且会按需引用,减少打包没有用的的内容
Composition API
Composition API是vue3新增的API,基于函数的API,可以将一个功能的代码写在一个函数中,在setup函数中调用这个函数,返回这个函数的返回值,就可以在页面中使用;Composition API可以很方便的将每一个功能的函数放在一起,很容易地看出一个功能的实现,更容易地将功能代码抽取共用
Composition API是新增的API,Vue3中还是可以使用Options API
const getProductList = async () => { const res = await this.$axios.post('http://test-api-url') const productList = ref(res.object.list || []) return productList } const getShopCart = () => { const shopCartList = ref(storage.getItem('SHOP_CART') || []) watchEffect(() => { storage.setItem(KEY, shopCartList.value) }) return shopCartList } const productAddToShopCart = shopCartList => { const addProduct = (product) => { shopCartList.value.push(product) } return addProduct } const shopCartDeleteproduct = shopCartList => { const deleteProduct = (product) => { const index = shopCartList.value.indexOf(product) shopCartList.value.splice(index, 1) } return deleteProduct } export default { name: 'App', setup () { const productList = getProductList() const shopCartList = getShopCart() return { productList, shopCartList, ...productAddToShopCart(shopCartList), ...shopCartDeleteproduct(shopCartList) } } }