189 8069 5689
这篇文章主要介绍“Vue3和Vue2比对有什么不同”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3和Vue2比对有什么不同”文章能帮助大家解决问题。
十载的达拉特网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整达拉特建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“达拉特网站设计”,“达拉特网站推广”以来，每个客户项目都认真落实执行。
性能
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比对有什么不同”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。