阅读 325
【Vue】- 窥探Vue3的设计理念

【Vue】- 窥探Vue3的设计理念

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

前言

刚入手学习 Vue,很多童鞋会有这样的疑问,是学 2.0,还是 3.0版本呀?尤雨溪这样回答道: 直接学 Vue 3 就行了,基础概念是一模一样的。

原文链接为《直接学 Vue 3 吧 —— 对话 Vue.js 作者尤雨溪》

尤大大为什么如此推崇 Vue3?我们就从其vue产生背景和设计理念具体看看吧。

Vue 产生的背景

前端近几年蓬勃发展,最初web项目简单,静态页面居多,使用JQuery比较适宜,随着web项目变得越来越复杂,逐渐产生了诸多前端框架,先是出现了 MVC 框架(Backbone),接着又出现了 MVVM 框架(Angular、React),尤雨溪大佬当时觉得Angular、React虽然实现了数据驱动,减少了 dom 操作,但是对于新手不太友好,Angular太过臃肿,React jsx语法学习成本高。于是大佬产生了创造简单易上手,符合中国人“中庸”之道的前端框架的念头。Vue也因此诞生了,小企业纷纷拿来用,因为简单易上手,降本提效。

Vue3 的设计理念

image.png

Vue3 继承了 Vue2 优秀的设计理念,然后又进一步做了优化改造。我们一起来具体看看吧。

Vue2、3共同的设计理念

简单、易上手

对比看过 AngularReactVue 的童鞋,应该发现了 Vue 是最符合前端开发的习惯,和最初的 html+css+js 三剑客模式很像,那么学习上手起来就so easy啦~~

数据驱动

数据驱动,是 Vue 最有商业价值的设计。近些年随着Web项目业务越来越复杂,擅长批量操作 DomjQuery 已经不合时宜了。引入虚拟 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 并且兼容 Vue2Options API 写法,一个功能所有的逻辑代码都写在一起,解决了 Vue2 开发过程中反复横跳的问题。因此提高了代码的可读性和可维护性。

image.png

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()
复制代码

参考官网:v3.cn.vuejs.org/api/global-…

文章分类
前端
文章标签