<p>作为从 Vue 1.0 一路使用过来的开发者，Vue 3.0 并非简单的版本迭代，而是在核心架构、性能、开发体验上的全面升级，同时兼容了 2.x 的大部分核心思想，既保留了我们熟悉的开发范式，又解决了 2.x 长期存在的痛点。以下从核心架构、语法特性、性能优化、工程化等维度，结合 2.x 对比梳理关键变化。</p>
<h3>一、核心架构：从 Options API 到 Composition API</h3>
<h4>1. Vue 2.x：Options API 为主</h4>
<p>Vue 2.x 采用「选项式 API」，将代码按 <code>data</code>、<code>methods</code>、<code>computed</code>、<code>watch</code>、<code>生命周期钩子</code> 等选项划分，优点是上手简单，但存在明显痛点：</p>
<ul>
<li>逻辑碎片化：一个业务逻辑（如「用户登录状态管理」）的代码会分散在 <code>data</code>（状态）、<code>methods</code>（方法）、<code>watch</code>（监听）、<code>mounted</code>（初始化）等多个选项中，组件越大，逻辑越难追踪；</li>
<li>代码复用受限：mixins 是主要复用方式，但存在命名冲突、来源不清晰、逻辑依赖隐晦的问题；</li>
<li>TypeScript 支持薄弱：Options API 天生不契合 TS 的类型推导，需要额外的类型声明，开发体验差。</li>
</ul>
<h4>2. Vue 3.0：Composition API（组合式 API）+ 保留 Options API</h4>
<p>Vue 3.0 推出「组合式 API」，核心是 <code>setup</code> 函数（组件的入口），允许按<strong>业务逻辑维度</strong>组织代码，而非按选项类型：</p>
<pre><code class="lang-vue language-vue vue">
&lt;template&gt;

&lt;div&gt;{{ count }}&lt;/div&gt;
  &lt;button @click=&quot;increment&quot;&gt;+1&lt;/button&gt;
&lt;/template&gt;

&lt;script setup&gt;
// Vue 3.0 组合式 API（&lt;script setup&gt; 语法糖）
import { ref, computed, onMounted } from &#039;vue&#039;

// 状态定义（替代 2.x 的 data）
const count = ref(0)

// 方法定义（替代 2.x 的 methods）
const increment = () =&gt; {
  count.value++
}

// 计算属性（替代 2.x 的 computed）
const doubleCount = computed(() =&gt; count.value * 2)

// 生命周期（替代 2.x 的 mounted）
onMounted(() =&gt; {
  console.log(&#039;组件挂载完成，count 初始值：&#039;, count.value)
})
&lt;/script&gt;</code></pre>
<p><strong>核心优势</strong>：</p>
<ul>
<li>逻辑聚合：一个业务逻辑的所有代码（状态、方法、监听、生命周期）可集中写在一处，组件结构更清晰；</li>
<li>灵活复用：通过「组合函数（Composables）」复用逻辑（如 <code>useUser()</code>、<code>useRequest()</code>），替代 mixins，解决命名冲突和依赖问题；</li>
<li>完美支持 TS：基于函数式的写法天然契合 TS 类型推导，无需额外声明即可获得完整的类型提示。</li>
</ul>
<p><strong>兼容说明</strong>：</p>
<ul>
<li>Vue 3.0 完全保留 Options API，2.x 的代码可直接迁移（仅需少量适配），支持「渐进式升级」—— 既可以在老组件中继续用 Options API，也可以在新组件中用 Composition API。</li>
</ul>
<h3>二、响应式系统：从 Object.defineProperty 到 Proxy</h3>
<h4>1. Vue 2.x：响应式的痛点</h4>
<p>Vue 2.x 基于 <code>Object.defineProperty</code> 实现响应式，存在天然限制：</p>
<ul>
<li>无法监听数组下标修改（如 <code>arr[0] = 1</code>）和数组长度修改（如 <code>arr.length = 0</code>），需通过 <code>Vue.set/this.$set</code> 或数组变异方法（<code>push/splice</code>）触发更新；</li>
<li>无法监听对象新增属性/删除属性（如 <code>this.obj.newKey = 1</code>），同样需要 <code>Vue.set/this.$delete</code>；</li>
<li>响应式初始化时需要递归遍历对象，性能随对象层级加深下降。</li>
</ul>
<h4>2. Vue 3.0：Proxy 重构响应式</h4>
<p>Vue 3.0 改用 ES6 的 <code>Proxy</code> 实现响应式，彻底解决上述问题：</p>
<ul>
<li>原生支持监听数组下标/长度修改、对象新增/删除属性，无需 <code>$set/$delete</code>；</li>
<li>非侵入式：无需修改原对象，而是代理对象，初始化时无需递归遍历（懒代理，访问属性时才递归），性能大幅提升；</li>
<li>支持 <code>Ref</code> 和 <code>Reactive</code> 两种响应式方式：
<ul>
<li><code>ref</code>：用于基础类型（字符串、数字等），通过 <code>.value</code> 访问（模板中自动解包，无需 <code>.value</code>）；</li>
<li><code>reactive</code>：用于对象/数组，返回代理对象，直接访问属性即可。</li>
</ul></li>
</ul>
<p><strong>示例对比</strong>：</p>
<pre><code class="lang-javascript language-javascript javascript">// Vue 2.x
export default {
  data() {
    return {
      arr: [1, 2, 3],
      obj: { name: &#039;Vue2&#039; }
    }
  },
  methods: {
    updateData() {
      // 无效：无法监听数组下标修改
      this.arr[0] = 100
      // 有效：需用 $set
      this.$set(this.arr, 0, 100)

      // 无效：无法监听对象新增属性
      this.obj.age = 3
      // 有效：需用 $set
      this.$set(this.obj, &#039;age&#039;, 3)
    }
  }
}

// Vue 3.0（Composition API）
import { ref, reactive } from &#039;vue&#039;
const arr = ref([1, 2, 3])
const obj = reactive({ name: &#039;Vue3&#039; })

const updateData = () =&gt; {
  // 有效：原生支持数组下标修改
  arr.value[0] = 100
  // 有效：原生支持对象新增属性
  obj.age = 3
}</code></pre>
<h3>三、性能优化：体积、渲染、编译全方位提升</h3>
<h4>1. 体积更小</h4>
<ul>
<li>Vue 2.x 运行时体积约 22KB（gzip）；</li>
<li>Vue 3.0 通过「树形摇树（Tree-shaking）」重构核心代码，仅引入使用的功能（如仅用响应式、不用编译器），最小体积约 10KB（gzip），体积减少 50% 以上。</li>
</ul>
<h4>2. 渲染更快</h4>
<ul>
<li>虚拟 DOM 重构：Vue 3.0 优化了虚拟 DOM 的生成和对比算法，引入「静态标记」—— 对模板中不变的节点（如纯文本、静态标签）做标记，对比时直接跳过，渲染性能提升约 55%；</li>
<li>编译优化：Vue 3.0 的模板编译器会提前分析模板结构，生成更高效的渲染函数，更新性能提升约 133%。</li>
</ul>
<h4>3. 内存占用更低</h4>
<p>Vue 3.0 优化了组件实例的内存占用，同场景下内存使用减少约 50%。</p>
<h3>四、其他关键变化（对比 Vue 2.x）</h3>
<h4>1. 生命周期钩子</h4>
<p>Vue 3.0 保留了 2.x 的生命周期概念，但命名略有调整（Composition API 中），且新增 <code>setup</code> 替代 <code>beforeCreate</code> 和 <code>created</code>：</p>
<table>
<thead>
<tr>
<th>Vue 2.x</th>
<th>Vue 3.0（Composition API）</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCreate</td>
<td>setup（开始）</td>
<td>setup 执行时，组件实例未创建</td>
</tr>
<tr>
<td>created</td>
<td>setup（结束）</td>
<td>setup 执行完，组件实例已创建</td>
</tr>
<tr>
<td>beforeMount</td>
<td>onBeforeMount</td>
<td>挂载前</td>
</tr>
<tr>
<td>mounted</td>
<td>onMounted</td>
<td>挂载后</td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>onBeforeUpdate</td>
<td>更新前</td>
</tr>
<tr>
<td>updated</td>
<td>onUpdated</td>
<td>更新后</td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>onBeforeUnmount</td>
<td>卸载前（命名更语义化）</td>
</tr>
<tr>
<td>destroyed</td>
<td>onUnmounted</td>
<td>卸载后（命名更语义化）</td>
</tr>
</tbody>
</table>
<h4>2. 模板语法</h4>
<ul>
<li>支持多根节点：Vue 2.x 模板要求唯一根节点，3.0 支持多根节点（Fragment），无需包裹 `
<div>`；</div></li>
<li>
<p>更灵活的 v-model：Vue 2.x 中 <code>v-model</code> 本质是 <code>value</code> + <code>input</code> 事件，3.0 支持自定义绑定属性和事件，且支持多个 v-model：</p>
<pre><code class="lang-vue language-vue vue">&lt;!-- Vue 2.x：仅能绑定一个 v-model，且固定 value/input --&gt;
&lt;Child v-model=&quot;name&quot; /&gt;

&lt;!-- Vue 3.0：支持多个 v-model，自定义属性和事件 --&gt;
&lt;Child v-model:name=&quot;name&quot; v-model:age=&quot;age&quot; /&gt;</code></pre>
</li>
<li>移除 <code>filter</code>：Vue 3.0 废弃了 2.x 的 <code>filter</code> 过滤器，推荐用计算属性或方法替代（减少 API 复杂度）。</li>
</ul>
<h4>3. 全局 API 调整</h4>
<p>Vue 2.x 的全局 API（如 <code>Vue.component</code>、<code>Vue.directive</code>）会污染全局环境，3.0 改为「实例化 API」：</p>
<pre><code class="lang-javascript language-javascript javascript">// Vue 2.x
import Vue from &#039;vue&#039;
Vue.component(&#039;MyComponent&#039;, { /* ... */ })
Vue.directive(&#039;my-dir&#039;, { /* ... */ })
new Vue({ el: &#039;#app&#039; })

// Vue 3.0
import { createApp } from &#039;vue&#039;
const app = createApp({ /* 根组件 */ })
app.component(&#039;MyComponent&#039;, { /* ... */ })
app.directive(&#039;my-dir&#039;, { /* ... */ })
app.mount(&#039;#app&#039;)</code></pre>
<p>优势：多个 Vue 实例可独立配置，避免全局配置冲突（如多应用嵌入场景）。</p>
<h4>4. 废弃/不推荐的特性</h4>
<ul>
<li>废弃 <code>Vue.prototype</code>：改用 <code>app.config.globalProperties</code> 挂载全局属性；</li>
<li>废弃 <code>$on/$off/$once</code>：移除实例事件总线，推荐用第三方库（如 mitt）替代；</li>
<li>不推荐 <code>filters</code>：用计算属性/方法替代；</li>
<li>不推荐 <code>mixins</code>：用 Composition API 的组合函数替代。</li>
</ul>
<h3>五、迁移建议（从 Vue 2.x 到 3.0）</h3>
<ol>
<li><strong>渐进式迁移</strong>：先保留 Options API，逐步在新功能中使用 Composition API，降低迁移成本；</li>
<li><strong>工具适配</strong>：升级脚手架到 Vite（Vue 3.0 推荐）或 Vue CLI 5+，安装 <code>@vue/compat</code> 兼容包，可临时兼容 2.x 代码；</li>
<li><strong>重点检查</strong>：
<ul>
<li>替换 <code>Vue.set/$set</code>、<code>Vue.delete/$delete</code>（3.0 无需）；</li>
<li>调整生命周期钩子（如 <code>beforeDestroy</code> → <code>onBeforeUnmount</code>）；</li>
<li>替换 <code>filter</code> 为计算属性/方法；</li>
</ul></li>
<li><strong>TypeScript 接入</strong>：新组件建议用 <code>&lt;script setup lang=&quot;ts&quot;&gt;</code>，充分利用 3.0 的 TS 优势。</li>
</ol>
<hr />
<h3>总结</h3>
<ol>
<li><strong>核心架构</strong>：Vue 3.0 的 Composition API 解决了 2.x Options API 逻辑碎片化、复用难、TS 支持差的问题，同时兼容 2.x 写法，支持渐进式升级；</li>
<li><strong>响应式系统</strong>：基于 Proxy 重构，彻底解决 2.x <code>Object.defineProperty</code> 无法监听数组/对象新增属性的痛点，性能和易用性大幅提升；</li>
<li><strong>性能与体验</strong>：体积更小、渲染更快，模板语法更灵活（多根节点、多 v-model），全局 API 更合理，是对 Vue 2.x 核心痛点的全面优化，同时保留了 Vue 一贯的「易用、渐进式」设计理念。</li>
</ol>

Vue 3.0 核心特性技术日志