Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本，我们连夜对 Release 进行了翻译。以下为译文正文。

当我走进现代前端开发行业的时候，我做了一个每位开发人员都要做的决策：选择一个合适的框架。当时正逢 jQuery 被淘汰，前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。前端正在走向一个时髦的，流行的，模块化的 JavaScript 框架的新时代。所以我选择了 VueJS。

进一步推进 “渐进式框架” 概念

分离内部模块

• 编译器支持自定义 AST 转换，用于在构建时自定义（如，在构建时进行 i18n 操作[6]）
• 核心运行时提供了一系列 API，用于针对不同渲染目标（如 native moile[7]、WebGL[8] 或终端[9]）的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
• `@vue/reactivity` 模块[10]导出的功能，可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用（如 lit-html[11]），甚至是在非 UI 场景中使用。

用于解决规模问题的全新 API

性能提升

改进与 TypeScript 的兼容

实验特性

• <script setup>：在 SFC 内使用 Composition API 的语法糖
• <style vars>：在 SFC 中支持将状态作为 CSS 变量注入到样式中

分阶段发布

迁移与 IE11 的支持

下一阶段工作

• 迁移构建

• 支持 IE11

• Router 以及 Vuex 与 devtools 的集成

• 对 Vetur 中模板类型推断的进一步改进

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>
<style>
#myDiv {
  display: block;
}
</style>

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}

Vue.component({
  template: `<div></div>`
})

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)

<div>
  <p v-for="student in students">{{ student }}</p>
</div>

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    return(<div/>)
  }
}

function MyComponent() {
  const [counter, setCounter] = useState(0)

  return(<div />)
}

或它们各自的框架：

如果社区能 更快 地修复错误，那么你的代码也就会更可靠。和你遇到相同问题的人越多，你解决问题的速度也会越快。

👆长按上方二维码 2 秒
回复「vue资料」即可获取上面所有资料


然后Vue入门之后，我们来结合后端对接开发，于是我录制了一个SpringBoot + Vue的开源博客项目，并编写了详细的开发文档，包括前端和后端。只需要按照文档，结合讲解视频，就能一步一步跟着做项目了哈，相信这样能大大加快学习的效率！
后端文档：

前端文档：

讲解视频：







如何获取视频？







1. 识别并关注公众号「Github中文社区」；
2. 在下面公众号后台回复关键字「vue」。



👆长按上方二维码 2 秒
回复「vue」即可获取上面所有资料