轩辕李的博客
轩辕李
2025-03-07
目录

Vue.js历代版本新特性

# 前言

Vue.js 诞生于2014年,由尤雨溪(Evan You)创建。从最初的个人项目,发展到今天成为全球最受欢迎的前端框架之一。

Vue.js 以其渐进式框架的设计理念、简洁的 API 和优秀的文档著称。从 Vue 1.x 的初露锋芒,到 Vue 2.x 的成熟稳定,再到 Vue 3.x 的性能突破,Vue 一直保持着快速的迭代和创新。

本文系统梳理了 Vue.js 各个版本的核心特性和发展历程。对于每个版本,我们会重点介绍那些影响深远的特性和重要的改进。

阅读建议:

  • 标记为 粗体 的特性通常是该版本最重要的改进
  • Vue 2.0 和 Vue 3.0 是两个里程碑版本,建议重点关注
  • 代码示例可以帮助你快速理解新特性的用法

# Vue.js 版本发布流程

Vue.js 由核心团队主导开发,采用语义化版本号(Semver),通过 RFC(Request For Comments)流程来引入重大特性。

# 关键特点

  • 主版本(Major):引入破坏性变更(如 2.x → 3.x)
  • 次版本(Minor):向后兼容的新特性(如 3.2 → 3.3)
  • 补丁版本(Patch):向后兼容的问题修复(如 3.3.4 → 3.3.5)

# RFC 流程

# 1. RFC 提案

  • 任何人都可以提交 RFC(Request For Comments)
  • 在 vuejs/rfcs (opens new window) 仓库提交
  • 描述动机、详细设计、缺点和替代方案

# 2. 讨论阶段

  • 社区成员参与讨论
  • 核心团队评审
  • 根据反馈修改提案

# 3. 决策

  • 核心团队做出最终决策
  • 接受、拒绝或搁置

# 4. 实现

  • 被接受的 RFC 进入实现阶段
  • 可能在实现过程中进一步调整

# 5. 发布

  • 完成实现和测试
  • 包含在相应版本中发布
  • 更新文档

# 治理模型

  • 由尤雨溪领导的核心团队主导
  • 社区驱动的 RFC 流程
  • 主要赞助商:Vue 基金会成员公司

# 0.x (2013-2014)

Vue 的最早期版本,还未正式发布。

# 核心特性

  • 数据绑定:基本的响应式数据绑定
  • 指令系统:v-text、v-html、v-if 等基础指令
  • 组件系统:早期的组件概念

# 1.0 (2015年10月)

第一个正式发布的主版本,代号 "Evangelion"。

# 核心特性

# 响应式系统

基于 Object.defineProperty 的响应式数据绑定。

new Vue({
  data: {
    message: 'Hello Vue!'
  }
})

# 指令系统

丰富的内置指令:

<div v-if="show">条件渲染</div>
<div v-for="item in items">{{ item }}</div>
<input v-model="message">
<button v-on:click="handleClick">点击</button>

# 组件系统

基于组件的开发模式:

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello Component'
    }
  }
})

# 过滤器

用于文本格式化:

{{ message | capitalize }}

# 插件系统

支持插件扩展:

Vue.use(VueRouter)

# 生态发展

  • vue-router:官方路由库
  • vue-resource:官方 HTTP 库(后被 axios 替代)

# 2.0 (2016年9月)

重大升级版本,带来性能提升和新特性。

# 核心特性

# Virtual DOM

引入虚拟 DOM,大幅提升渲染性能:

// Vue 2.0 使用虚拟 DOM 进行高效的 DOM 更新
render(h) {
  return h('div', { class: 'container' }, [
    h('h1', 'Hello Vue 2')
  ])
}

# 服务端渲染(SSR)

官方支持服务端渲染:

const renderer = require('vue-server-renderer').createRenderer()

renderer.renderToString(app, (err, html) => {
  // html 将是完整的页面内容
})

# 更好的性能

  • 比 Vue 1.x 快 2-4 倍
  • 更小的打包体积

# 单文件组件(.vue)

完善的单文件组件支持:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue 2!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

# 2.1 (2016年11月)

# 主要改进

  • 作用域插槽:更灵活的插槽机制
<template>
  <slot :user="user"></slot>
</template>
  • 更好的错误处理:errorCaptured 钩子

# 2.2 (2017年2月)

# 主要改进

  • 支持原生 ES 模块
  • v-for 与 v-if 优先级调整
  • 服务端渲染改进

# 2.3 (2017年4月)

# 主要改进

  • 异步组件改进:支持加载状态和错误处理
const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

# 2.4 (2017年7月)

# 主要改进

  • 保留 HTML 注释:comments 选项
  • 改进的 v-on 修饰符

# 2.5 (2017年10月)

# 核心特性

# TypeScript 支持改进

更好的类型推断:

import Vue from 'vue'

const Component = Vue.extend({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++ // TypeScript 可以正确推断类型
    }
  }
})

# 错误处理改进

更完善的错误处理机制:

Vue.config.errorHandler = (err, vm, info) => {
  console.error('Error:', err)
  console.log('Component:', vm)
  console.log('Info:', info)
}

# 2.6 (2019年2月)

# 核心特性

# v-slot 语法

统一的插槽语法,取代 slot 和 slot-scope:

<!-- 新语法 -->
<template v-slot:header="{ user }">
  <h1>{{ user.name }}</h1>
</template>

<!-- 缩写 -->
<template #header="{ user }">
  <h1>{{ user.name }}</h1>
</template>

# 动态指令参数

指令参数可以是动态的:

<a v-bind:[attributeName]="url">Link</a>
<button v-on:[eventName]="handler">Click</button>

# 异步错误处理改进

Promise 错误可以被 errorCaptured 捕获。

# 编译警告提示改进

更友好的编译时警告信息。

# 2.7 (2022年7月)

Vue 2.x 的最后一个次版本,将 Vue 3 的部分特性回移植到 Vue 2。

# 核心特性

# Composition API

从 Vue 3 移植过来的组合式 API:

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      double,
      increment
    }
  }
}
</script>

# script setup 语法

支持 <script setup> 语法糖:

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

# defineComponent

更好的 TypeScript 支持:

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    // props 有正确的类型推断
  }
})

# 改进的 TypeScript 支持

更好的类型推断和类型检查。

# 注意事项

  • Vue 2.7 是 Vue 2.x 的最后一个次版本
  • 2023年12月31日结束所有 Vue 2.x 的支持
  • 建议新项目使用 Vue 3

# 3.0 (2020年9月)

完全重写的版本,代号 "One Piece",带来革命性的改进。

# 核心特性

# Composition API

全新的组合式 API,更好的逻辑复用:

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted')
})

function increment() {
  count.value++
}
</script>

# 响应式系统重写

基于 Proxy 的响应式系统,性能更好:

import { reactive, ref } from 'vue'

// 响应式对象
const state = reactive({
  count: 0,
  nested: {
    value: 1
  }
})

// 响应式引用
const count = ref(0)
count.value++

# 性能提升

  • 虚拟 DOM 重写,速度提升 1.3-2 倍
  • 更小的打包体积(Tree-shakable)
  • 更快的组件初始化

# 更好的 TypeScript 支持

用 TypeScript 重写,类型推断更准确:

import { defineComponent, PropType } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  }
})

# Teleport

将组件渲染到 DOM 的其他位置:

<teleport to="body">
  <div class="modal">
    Modal content
  </div>
</teleport>

# Fragments

支持多个根节点:

<template>
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</template>

# Suspense

异步组件的加载状态管理:

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

# 自定义渲染器 API

可以创建自定义渲染器,用于非 DOM 环境。

# 破坏性变更

  • 全局 API 改为应用实例 API
  • 移除 $on、$off、$once
  • 过滤器被移除
  • v-model 用法改变
  • 函数式组件简化

# 3.1 (2021年6月)

# 主要改进

  • 迁移构建:帮助从 Vue 2 迁移
  • onServerPrefetch 钩子:SSR 改进
  • 实验性特性:
    • <script setup>
    • <style> v-bind

# 3.2 (2021年8月)

重要的性能和开发体验改进版本。

# 核心特性

# <script setup> 正式发布

成为推荐的 SFC 语法:

<script setup>
import { ref } from 'vue'

// 自动暴露给模板
const count = ref(0)
</script>

# <style> v-bind

在 CSS 中使用 JavaScript 变量:

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>

<style scoped>
.text {
  color: v-bind(color);
}
</style>

# 性能改进

  • 更高效的 ref 实现
  • 模板编译优化
  • SSR 性能提升

# 服务端渲染改进

  • 更快的 SSR
  • 流式渲染支持

# defineCustomElement

原生 Web Components 支持:

import { defineCustomElement } from 'vue'

const MyElement = defineCustomElement({
  props: ['msg'],
  template: `<div>{{ msg }}</div>`
})

customElements.define('my-element', MyElement)

# effectScope API

更灵活的响应式副作用管理:

import { effectScope } from 'vue'

const scope = effectScope()

scope.run(() => {
  // 在这里创建的响应式副作用可以一次性清理
})

// 清理所有副作用
scope.stop()

# 3.3 (2023年5月)

代号 "Rurouni Kenshin",专注于开发体验改进。

# 核心特性

# <script setup> + TypeScript 改进

更好的类型推断:

<script setup lang="ts">
// defineProps 支持类型声明
const props = defineProps<{
  msg: string
  count?: number
}>()

// defineEmits 支持类型声明
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()
</script>

# 泛型组件

组件支持泛型:

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

# 导入的类型可用于 props

可以直接使用导入的类型:

<script setup lang="ts">
import type { User } from './types'

defineProps<{
  user: User
}>()
</script>

# defineSlots

为插槽提供类型:

<script setup lang="ts">
defineSlots<{
  default(props: { msg: string }): any
  footer(): any
}>()
</script>

# 更好的响应式解构

props 解构保持响应性:

<script setup>
const { msg, count = 0 } = defineProps(['msg', 'count'])
// msg 和 count 保持响应性
</script>

# defineModel

简化 v-model 的使用:

<script setup>
const modelValue = defineModel()
// 相当于声明 props 和 emits
</script>

# defineOptions

在 <script setup> 中定义组件选项:

<script setup>
defineOptions({
  name: 'CustomName',
  inheritAttrs: false
})
</script>

# 3.4 (2023年12月)

代号 "Slam Dunk",专注于性能优化。

# 核心特性

# 解析器速度提升

  • 模板解析速度提升 2 倍
  • SFC 编译速度提升

# 响应式系统优化

  • 计算属性性能提升
  • 深度响应式对象性能改进

# 更高效的 Hydration

SSR Hydration 性能提升。

# v-bind 性能优化

静态 props 绑定性能提升。

# defineModel 稳定版

defineModel 成为稳定 API:

<script setup>
// 双向绑定简化
const modelValue = defineModel()

// 带选项
const modelValue = defineModel({ type: String, required: true })

// 多个 v-model
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

# 改进的 Hydration 不匹配处理

更好的 SSR Hydration 不匹配警告。

# 3.5 (2024年9月)

代号 "Tengen Toppa Gurren Lagann",持续优化和改进。

# 核心特性

# 响应式系统优化

  • 响应式 props 解构性能提升
  • 深度响应式对象内存占用减少

# SSR 性能提升

  • 懒 Hydration 策略
  • 异步组件 Hydration 改进

# 自定义元素改进

更好的 Web Components 支持:

import { defineCustomElement } from 'vue'

const MyElement = defineCustomElement({
  // 支持异步组件
  async setup() {
    const data = await fetchData()
    return { data }
  }
})

# useId()

生成 SSR 安全的唯一 ID:

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <label :for="id">Name</label>
  <input :id="id" />
</template>

# useTemplateRef()

更类型安全的模板引用:

<script setup>
import { useTemplateRef } from 'vue'

const inputRef = useTemplateRef('input')

onMounted(() => {
  inputRef.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

# Teleport 延迟挂载

Teleport 支持 defer 属性:

<Teleport to="#modal" defer>
  <!-- 延迟到目标元素存在后再挂载 -->
</Teleport>

# 数据获取和缓存改进

内置的数据获取和缓存支持(实验性)。

# 总结

Vue.js 从 1.0 到 3.5 的演进历程:

# 重要里程碑

  • Vue 1.0（2015）:首个正式版本,确立核心理念
  • Vue 2.0（2016）:引入虚拟 DOM,性能飞跃
  • Vue 2.7（2022）:Vue 2 与 Vue 3 的桥梁
  • Vue 3.0（2020）:完全重写,Composition API 和 Proxy 响应式
  • Vue 3.2（2021）:<script setup> 和性能优化
  • Vue 3.3（2023）:TypeScript 和开发体验大幅改进
  • Vue 3.4（2023）:解析器和响应式性能优化
  • Vue 3.5（2024）:持续优化和新的实用 API

# 重点关注的版本

  • Vue 2.x:了解历史,维护老项目
  • Vue 3.2+:现代 Vue 开发的基础
  • Vue 3.3+:最佳 TypeScript 支持
  • Vue 3.5:最新稳定版本,推荐使用

# 学习建议

  1. 新手:直接学习 Vue 3.5 + Composition API + <script setup>
  2. Vue 2 用户:通过 Vue 2.7 熟悉 Composition API,然后迁移到 Vue 3
  3. 进阶:深入理解响应式系统、虚拟 DOM 和编译器原理

# 参考资料

祝你变得更强!

编辑 (opens new window)
#Vue.js版本新特性#Vue
上次更新: 2025/11/07
Node.js高级特性详解
HTML基础全景图

← HTML基础全景图→

最近更新
01
AI编程时代的一些心得
09-11
02
Claude Code与Codex的协同工作
09-01
03
Claude Code 最佳实践（个人版）
08-01
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License