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等等工具。 【有点重新设计的思维】
本文由mdnice多平台发布