「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
前言
刚入手学习 Vue，很多童鞋会有这样的疑问，是学 2.0，还是 3.0版本呀？尤雨溪这样回答道： 直接学 Vue 3 就行了，基础概念是一模一样的。
尤大大为什么如此推崇 Vue3？我们就从其vue产生背景和设计理念具体看看吧。
Vue 产生的背景
前端近几年蓬勃发展，最初web项目简单，静态页面居多，使用JQuery比较适宜，随着web项目变得越来越复杂，逐渐产生了诸多前端框架，先是出现了 MVC 框架（Backbone），接着又出现了 MVVM 框架（Angular、React），尤雨溪大佬当时觉得Angular、React虽然实现了数据驱动，减少了 dom 操作，但是对于新手不太友好，Angular太过臃肿，React jsx语法学习成本高。于是大佬产生了创造简单易上手，符合中国人“中庸”之道的前端框架的念头。Vue也因此诞生了，小企业纷纷拿来用，因为简单易上手，降本提效。
Vue3 的设计理念
Vue3 继承了 Vue2 优秀的设计理念，然后又进一步做了优化改造。我们一起来具体看看吧。
Vue2、3共同的设计理念
简单、易上手
对比看过 Angular、React 和 Vue 的童鞋，应该发现了 Vue 是最符合前端开发的习惯，和最初的 html+css+js 三剑客模式很像，那么学习上手起来就so easy啦~~
数据驱动
数据驱动，是 Vue 最有商业价值的设计。近些年随着Web项目业务越来越复杂，擅长批量操作 Dom 的 jQuery 已经不合时宜了。引入虚拟 Dom 解决频繁操作 Dom 节点的性能问题，它是通过监听数据变化，更新虚拟dom（其中用到了 patch 算法对比 vnode），最后才更新视图层变化，省去很多操作 Dom 的交互代码，提高了开发效率。
渐进式
渐进式，是 Vue 相对人性化的设计。开发人员可以不用将 Vue 系列技术栈都学完才上手做项目，当多个页面需要用到路由，再学 vue-router；当业务数据复杂，多个组件需要同步状态时，再学 vuex；当项目庞大且需要统一 ui 风格时，再选择 elementui/iview...。Vue 整个体系是渐进增强的学习曲线，对开发人员更为友好。
Vue3 的改进理念
Vue3 回顾过去版本，取其精华，去其糟粕，尤大大做了一些列的改进升级，具体有以下几个方面：
1、类型支持
为什么Vue3 推崇函数式编程？
随着前端项目越来越大，前端开发人员承担的工作越来越重，类型的正确性显得越来越重要，因此需要 Typescript 保驾护航。而对 TS 支持最为友好的就是函数式编程。
2、更利于tree-shaking
Vue3 基于函数的 API 每一个函数都可以作为 named ES export 被单独引入，这使得它们对 tree-shaking 非常友好。
3、复用性
Vue3 创建函数时，可以使用类似 hook 的形式，将相同逻辑的代码封装起来，需要用的时候直接调用函数。如下所示：
// 类似 hook，增强复用性
function useTitle() {
const state = Vue.reactive({
title: 'hello, setup'
})
setTimeout(()=> {
state.title = 'hello, useTile'
}, 2000)
return state
}
const app = Vue.createApp({
setup() {
const state = useTitle()
return state
}
})
app.mount('#app')
复制代码4、维护性
Vue3 升级了全新的 API，创新了 Composition API 并且兼容 Vue2 的 Options API 写法，一个功能所有的逻辑代码都写在一起，解决了 Vue2 开发过程中反复横跳的问题。因此提高了代码的可读性和可维护性。
5、API简化
1）一致性
Vue3 奉行一致性的原则，比如将自定义指令的生命周期和组件的生命周期统一了，给开发者减轻负担，记住一套生命周期的 API 即可。以定义一个focus 指令为例：
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
})
复制代码2）删除相同功能的API（比如v-model和.sync）
<!-- vue3 只有v-model -->
<comp v-model="foo"></comp>
<!-- vue2 .sync -->
<comp :foo.sync="foo"></comp>
<comp :value="foo" @update:value="foo = $event"></comp>
复制代码3）render简化
// Vue2 写法
render(h){
return h('div', {
attrs: {
title: this.title
}
}, 'xxx')
}
// Vue3 写法（将属性和方法都铺平了）
render(){
return Vue.h('div', {
title: this.title
}, 'xxx')
}
复制代码6、扩展性
Vue3 有很好的扩展性，比如将渲染器函数暴露成 API，开发者可以自定义渲染器，兼容不同平台的渲染方式及节点操作（比如小程序、native APP等等）。
// 扩展性：自定义渲染器（用来兼容不同平台渲染）
const renderer = Vue.createRenderer({
// 如何获取节点
querySelector(){},
// 如何创建元素
createElement(){}
})
renderer.createApp()
复制代码