「这是我参与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()
复制代码