2020年3月11日12:24:17前端框架评论阅读模式

Vue、Angular、React对比

前端在复杂性日增的今天，三个框架被我们熟知，Vue、React、Angular，三个经常经常被我们拿来讨论，对比，比如学习哪个？

前端框架解决的核心问题

在我入门的时候，第一个学习的就是Vue，基本跳过了后台php、jsp结合JQuery,三个框架成为了开发三选一的问题，在后面的工作和学习中，我逐渐意识到前框框架解决的核心问题在于数据和视图同步，我也发现挺多人意识到了这一点，并且在向大众普及这个前端需要解决的核心问题

前端框架如何解决数据向视图的复杂映射

我们说目前前端的核心问题是数据和视图的同步，这里我姑且采用了一个个人觉得更适合的名词，数据到视图的映射，那么框架们是以怎么样的思路思考这个问题的呢，我们这里开展一个功能实现的讨论，首先是JQuery实现,我们需要更新输入框值

直接命令式

// 当前用户名的值let curUsername = 'cj'// 找到类名为username的元素let username = $('.username')// 设置username为cjusername.val(curUsername)

按照以下步骤，即可完成我们的小需求

定义修改的值
找到需要修改的元素
修改元素的值为我们给定的值

问题

这里找到元素、设置元素的值，明显是很命令式的写法，如果我们需要多次操作，一个简单的方法就是多次重复这段代码

使用函数维护

function updateUsername(username) {  let usernameInput = $('.username')  usernameInput.val(username)}
let curUsername = 'cj'updateUsername(curUsername)

从上述代码可以抽象出，我们只需要关心改变的值和改变的元素，其他细节是我们不需要知道的，中间选取元素、修改元素在过程中可以认为是完全抽离成一个新的抽象，下面就是基于这一点的思考

更深的思考

既然我们关注的点在于目标元素、数据，这两者可以在编译时确定，只要我们更新这个数据，系统就更新对应引用这个数据的元素，从而将我们从指定元素、修改元素的重复劳动中脱离出来，这是一个基本的思路，当然Vue采用的是上述的思路，而React采用的是暴力diff的方式

目前实现

Vue绑定数据和节点在一起，在数据更新时，更新对应的元素
React比较直接，直接对整个组件diff，找到前后不同的地方，内部根本不需要知道数据和节点的对应关系
Angular，接触很少，目前好像是脏检查和proxy结合

关于Virtual DOM解决的问题

目前来说，Virtual DOM 和配套的diff算法，逐渐出现在大家面前，这里我们为什么要引入这两套技术？，大家其实看的也多了，解决DOM更新缓慢，跨平台等，那么它引入的初心是什么，这还得看React为什么要引入它

为什么需要Virtual DOM

Virtual DOM是由React推出时引入的技术，个人理解是，React系统不知道数据对应的节点是哪些，所以按照常规方式来说，肯定是要更新全部节点，React需要一种在操作节点之前用于性能优化的一套方案，这就是React引入Virtual DOM技术的初心

Vue为什么引入Virtual DOM

目前很多Vue响应式基本实现会像以下一样：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>    <div id='app'>        <h3>姓名</h3>        <p>{{name}}</p>        <h3>年龄</h3>        <p>{{age}}</p>    </div></body></html><script>document.addEventListener('DOMContentLoaded', function(){    let opt = {el:'#app', data:{name:'检索中...', age:30}}    let vm = new Vue(opt)    setTimeout(() => {        opt.data.name = '王永峰'    }, 2000);}, false)class Vue{    constructor(opt){        this.opt = opt        this.observe(opt.data)        let root = document.querySelector(opt.el)        this.compile(root)    }    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象    observe(data){        Object.keys(data).forEach(key => {            let obv = new Observer()            data["_"+key] = data[key]            // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生            Object.defineProperty(data, key, {                get(){                    Observer.target && obv.addSubNode(Observer.target);                    return data['_'+key]                },                set(newVal){                    obv.update(newVal)                    data['_'+key] = newVal                }            })        })    }    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来    compile(node){        [].forEach.call(node.childNodes, child =>{            if(!child.firstElementChild && /{{(.*)}}/.test(child.innerHTML)){                let key = RegExp.$1.trim()                child.innerHTML = child.innerHTML.replace(new RegExp('\{\{\s*'+ key +'\s*\}\}', 'gm'),this.opt.data[key])                Observer.target = child                this.opt.data[key]                Observer.target = null            }            else if (child.firstElementChild)            this.compile(child)        })    }}// 常规观察者类class Observer{    constructor(){        this.subNode = []    }    addSubNode(node){        this.subNode.push(node)    }    update(newVal){        this.subNode.forEach(node=>{            node.innerHTML = newVal        })    }}</script>

上述代码是Vue1的核心实现简化，每个数据知道引用自己的精确节点，Vue的实现是在每个节点编译，引用数据时都为其生成一个Watcher，显而易见，为每一个引用数据的节点都要生成一个Watcher，是有比较大的内存压力，如何解决，很简单，将粒度提升到组件级别，将低粒度的diff交给Virtual DOM

前端框架认知反思

框架解决的核心是选择节点，操作节点这一过程的抽象，将其隐藏在框架实现之内，我们只需要关注数据和节点的对于关系即可，其余技术是在这个大背景下的优化。

数据驱动方案

数据驱动方案决定了其性能以及后续性能与优化方向，数据驱动是前端的一大潮流，已经成为了框架必备特性了，因为从前面的讨论得知，操作节点、修改节点已经可以很好地进行抽象，优化。这里简单讨论一下三个框架的数据驱动方案

Vue

数据驱动设计

Vue2的数据驱动还是数据劫持和Virtual DOM方案结合，即保持了较为精准的更新能力又保持了内存使用的低水平，Vue这种方式有着天然的性能优势，所以大家在对组件的认知上不仅仅要知道组件复用才被抽取，其实，组件可以进行良好的代码组件，维持适当大小的组件规模，还可以利用Vue2的数据驱动方案进行一个天然的性能优化，关于这一点具体的情况，后面我会研究分离组件和整体的性能差异

模板优化

Vue使用模板时，还可以获得静态优化的优势，在Vue3更加优化了模板编译

React

数据驱动设计

React更新采用了Virtual DOM，解决了数据更新时，完全替换的问题，实现了局部更新的可能，但是对于数据更新这一层薄弱，或者说，完全不知道数据变了，需要我们主动setState，这就产生了后续需要在生命周期交由开发者避免不必要的渲染优化，这里还有一个重要的点，就是时间分片，React推出了Fiber,用于优化视图更新时的性能问题，这里多说一句，Vue3本来也实现了时间分片，考虑到收益不大，又移除了，这应该是本身Vue的数据驱动方案的优势造成时间分片的收益较低

模板优化

由于采用了JSX，没法提供足够的信息在编译时进行优化,但是可以尝试在JSX 编译成 React.createElement 的整个过程进行优化，目前 FaceBook 推出了Prepack 用于这个过程的优化

Angular

数据驱动设计

angular9目前采用了脏检测和proxy结合的方式，基本没使用，不予评价

模板优化

Angular支持模板，随着V9版本发布，ivy渲染引擎推出，用于优化，也算是一个弥补

数据驱动设计反思

实现数据驱动的方式有很多，Vue和Angular走得是类MVVM的形式，React实质上不可以称为MVVM框架，就如它所说的，他就是一个视图层框架，数据驱动的不同方式各有优劣，个人能力水平有限，也说不出谁好谁坏，但是可以看出的是，每个数据驱动的方式都有存在一点缺陷，框架本身也针对这些缺陷在优化

组件化设计

组件化除了数据驱动另外一大前端趋势，框架如何设计组件也是一个关注点

Vue

定义

Vue.component("my-component", {  props:['props1'],  template: `    <div @click="clickHandler">      <slot><slot>    </div>  `,  methods: {    clickHandler() {      this.$emit('click')    }  }});

使用

<my-component @click="clickHandler" :props1="props1" data-x="dataX">  <template #default>slot</template></my-component>

数据入口

Vue在组件上划分了props和attrs，组件内部提供了props选项来捕获特点的attr转换为props，其余会成为attrs直接附加到组件根节点上，实质上，这是一种默认大于配置的想法，默认无关的属性应该附加到根节点，但是总会有少数情况，所以后续Vue提供了inheritAttrs来控制attr作用元素

组件事件

Vue在组件之前的事件采用了发布订阅模式EventEmitter来实现，这个模式比起直接传递回调函数，有以下好处

在认知上，区分了触发者和响应者

组件内容替换

Vue提供了slot机制，用于提供扩展组件内部节点，值得一提的是，scopedSlot机制

React

定义

function Square(props) {  return (    <button onClick={props.onClick}>      {props.props1}    </button>    <div>props.slot<div>  );}

使用

<Square value={} onClick={() => this.handlerClick(i)  slot={}}/>

数据入口

React没有区分Props和attrs，只是将数据解析好，完全交给开发者去控制

组件事件

React采用了将父组件直接传入子组件的方式，个人认为像Vue那样的EventEmitter对于开发者更加友好

组件内容替换

React没有为slot提供特殊语法，可以直接将slot以普通属性的方式传递进来，剩下的交由组件内部处理

Angular

定义

@Component({  // 省略})export class ProductAlertsComponent implements OnInit {  // 定义数据入口  @Input() product;
  // 定义外部事件  @Output() notify = new EventEmitter();  constructor() { }
}

<div>  <button @click="notify.emit()"></button>  <ng-content></ng-content></div>

使用

<component  (notify)="onNotify()"  [product]="product">  <div>slot</div></component>

数据入口

Angular也只是提供了一个数据入口

组件事件

Angular类似Vue一样，使用了发布订阅模式来管理组件之间的事件

组件内容替换

Angular提供了类似slot的机制来扩展组件节点能力

组件化设计反思

毫无疑问，组件化一定是未来的持续保持的前端框架特性，如何设计一个良好的组件，这是值得思考的，三个框架也有自己的思考，，这里不予评价

框架特性

这一点我想只是从我的认知来讲，框架除去数据驱动和组件化设计之外，它对开发者带来哪些特性，能力有限，这里分析不是很深入

Vue

Vue 是适应开发者，让开发者怎么爽怎么来，Vue很多特性都是基于开发者角度去开发的，比如attr和props，Angular和React就不会这样处理，完全交给开发者去处理细节，所以就导致，Vue好像看起来没啥框架上的特点，实质上，Vue将一些对开发者认知不友好的处理，内置到了框架之内

React

React 设计是改变开发者，提供强大而复杂的机制，当然这么做，就会社区非常繁荣，后续也可以吸收一些良好的范式，目前我也在学习React，不得不说，React更像是学院派，社区能够诞生很多不错的Idea

推崇函数式编程

Angular

Angular给我最深的印象是Service和DI的机制,它也为开发者考虑了很多，很多库直接用官方的就可以了，完全不需要考虑用哪个，Angular的脚手架用起来还是挺舒服的

Service将与视图渲染无关的逻辑提取到单独代码中
DI解决了对象管理混乱的问题
更加贴近java那套OOP

总结

从前端框架解决的问题出发，我们反思了数据驱动、组件化等框架必备特性，脱去这两点，剩余的框架特性，推崇的编程范式，也是值得我们品味的，比如Angular视图渲染逻辑和数据分离，在React、Vue我们也可以借鉴，三大框架未来在保持数据驱动和组件化特性下，框架特性这一块，很可能还是要统一走一套，比如Vue3的hook和React的hook,这一点是对开发者友好的，学习、认知成本没那么高，有人会在这种文章上说，谁抄谁这种话，我认为试试不妥的，希望大家能够以一个更高层的视觉看到目前前端的发展。

本文来源于：从事前端半年，我是这样看待三大框架的-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。