Vue3和Vue2比对有什么不同

这篇文章主要介绍"Vue3和Vue2比对有什么不同"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"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)

}

}

关于"Vue3和Vue2比对有什么不同"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。