Vue 及 Vue理解

一 Vue 是什么？

        vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面的应用的Web框架。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便的获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

二 Vue核心特性

数据驱动 （MVVM）

MVVM表示的是 Model-View-ViewModel

• Model 模型层，负责处理业务逻辑以及和服务端进行交互
• View 视图层， 负责将数据模型转化为UI展示出来 可以理解为HTML页面
• ViewModel 视图模型层 用来连接Model和View，是Model和View之间的通信桥梁。

组件化

1.组件化就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式，在vue中每一个.vue文件都可以视为一个组件。

2.组件化的优势 

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求。
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题时，可以用排除法直接移除组件，或根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比较分析整个系统要简单
• 提高可维护性， 由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。

3.指令系统 

指令(Directives)是有带v-前缀的特殊属性作用：当表达式的值改变时，将产生的连带影响，响应式的作用域于DOM。

常用的指令

• 条件渲染指令 v-if
• 列表渲染指令 v-for
• 属性绑定指令 v-bind
• 事件绑定指令 v-on
• 双向数据绑定指令 v-model

没有指令之前，我们是要先获取到DOM，然后再做相应的操作....

三 Vue和传统开发的区别

1.Vue所有的界面事件，都只是去操作数据的；

2.Vue所有界面的变动，都是根据数据自动绑定出来的。

四 Vue和React的区别

相同点

• 都有组件化思想
• 都支持服务器端渲染
• 都有Virtual DOM
• 数据驱动视图
• 都有支持的native (vue的weex, react的React-native)
• 都有自己的构建工具  (vue的vue-cli, react的Create React App)

 不同点

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