Vue3相较于Vue2做出了那些改变

最新推荐文章于 2025-06-01 16:03:44 发布

xihuhu

最新推荐文章于 2025-06-01 16:03:44 发布

阅读量915

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue-cli3

本文链接：https://blog.youkuaiyun.com/xihuhu/article/details/121596968

Vue3带来了显著的性能提升，首次渲染更快，内存占用更小，并且增强了对Typescript的支持。核心变化是引入了Composition API，改变了数据绑定方式，使用Proxy替代了Object.defineProperty进行响应式处理。项目搭建过程与Vue2类似，但在main.js中可以看到明显不同，Vue3允许template内有多个根元素。Vue3还提供了选项式API和组合式API，其中组合式API为重点，但需要注意其代码组织对维护的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.整体优化

1. 性能方面的提升

1.1 首次渲染更快

1.2 diff算法更快

1.3 内存占用更小

2. 更好的Typescript支持

3.Composition API （这是重点内容）

2.项目搭建

与Vue2搭建项目一样，只是在后面选择时选择Vue3.X

在项目搭建完成之后我们就可以看见变化

在入口文件 main.js 中我们就可以发现

这是Vue2.X

// 这是Vue2中的入口文件
new Vue({
  el: '#app',
  render: h => h(App)
})

这是Vue3.X

// 这是Vue3中的入口文件
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Vue3 中还更新了 template内，根元素不再限定只有一个

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

3.双向绑定

在Vue2中我们使用Object.defineProperty来做劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知，而在Vue3中则通过ES6中的proxy来做劫持，当数据发生改变发出通知。

代码示例

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">

最低0.47元/天解锁文章

200万优质内容无限畅学