0x01: 说说你对Vue的理解？

回答流程

第一步骤:简短概括 【官方的定义】

是一款轻量级的用于构建用户界面的javascript渐进式框架。 基于标准的html、css和js 来提供了一套声明式、组件化的编程模型。 从而能够高效的开发复杂的用户界面。

第二个步骤：【特性】

1）Vue构成的技术栈

Vue + Vue-router + Vuex 实现页面路由以及全局装填的管理。 —— 渐进式【灵活】

2）指令系统： —— 易用

大量的指令系统。

3）架构：

基于MVVM模式实现的UI和数据的绑定。

4）组件化：

UI实现组件化， 降低耦合、重用性、维护性、调试方便。

5)高效：

操作虚拟DOM，采用diff算法更新DOM。

第三步骤： 比较

1、Jquery DOM的传统操作

Jquery 在界面事件、界面更新都是直接操作DOM

Vue： 界面事件是通过更新数据， 界面的更新是根据数据自动绑定显示出来。

就是直接操作DOM和更新数据来显示的区别。

2、React

相同点
都有组件化思想

都支持服务器端渲染

都有Virtual DOM（虚拟dom）

数据驱动视图

都有支持native的方案：Vue的weex、React的React native

都有自己的构建工具：Vue的vue-cli、React的Create React App

区别
数据变化 实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
组件化通信不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
diff算法不同react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

第4个步骤：原因（发展例程）
1、静态网页时代

内容写死进去，只可以浏览

2、动态网页时代

页面是可以动态渲染以及交互的

3、工程化【工具化】

3.1 因为原始的方式直接调用系统接口，所以，是一种过程化的操作方式，比较麻烦， —— 产生了工具化， JQuery backbone EmberJS AngularJS 等工具，【有点抽象代码块的感觉】

节约了开发人员大量的精力、降低了开发者和开发过程的门槛，极大提升了开发效率和迭代速度，

3.2 产生越来越多的工具，web项目越来越大， 然后产生了不同的解决方案， 从而产生了Vue， React等等工具。 【有点重新设计的思维】

Vue vs React

本文由mdnice多平台发布