那么看看vue3 和 vue2 有哪些不一样的地方

 

性能

 

Vue 2.6.10 最小化压缩 22.8kB

 

Vue 3 最小化压缩约为 10KB

 

全局API

 

vue2:

 

Vue核心使用什么功能，它们最终都会出现在生产代码中，因为Vue实例被导出为单个对象

 

vue3:

 

按需导出，只导出使用到的API并删除未使用的代码。所以以前的全局API现在只能通过命名的导出才能使用。

 

示例

 

vue2

 

// Vue 2.x - whole ——Vue—— object is bundled for production

 

import Vue from 'vue'

 

Vue.nextTick(() => {})

 

const obj = Vue.observable({})

 

vue3

 

// Vue 3.x - only imported properties are bundled

 

import { nextTick, observable } from 'vue'

 

nextTick(() => {})

 

const obj = observable({})

 

属性赋值

 

vue2 基于的Object.defineProperty, 我们需要使用Vue.set,Vue.delete 来设值属性值，触发属性值的变化。

 

vue3 使用JS Proxies, 直接对属性进行赋值，就可以触发属性值变化。

 

并且vue3的这一改进，可以更快触发属性值变化，性能比vue2 大约快2倍。

 

示例

 

// Adding a new property to reacitve object in Vue 2.x

 

Vue.set(this.myObject, key, value)

 

// Adding a new property to reactive object in Vue 3

 

this.myObject[key] = value

 

重新渲染组件识别

 

Vue 3中新增一个新的生命周期挂钩-renderTriggered, 我们renderTriggered可以使用它来跟踪和消除不必要的组件重新渲染, 这对在运行时组件的性能优化有非常有用。

 

示例

 

const Component = {

 

// other properties

 

renderTriggered (event) {

 

console.log(——Re-render of —— + this.$options.name + —— component——, event)

 

}

 

}

 

PS

 

vue3 来了，又要开始学习新知识了，你快学不动了吗？