关于Vue的理解以及与React框架的对比

一、Vue的理解

• 概念：
  • Vue是一套用于构建用户界面的渐进式框架；
  • Vue的核心库只关注视图层；
  • 是一个数据驱动的MVVM框架；　　
• 特性：
  • 确实轻量：体积比较小；
  • 数据绑定简单、方便；
  • 有一些简单的内置指令（v-*），也能够自定义指令，经过对应表达式的值就能够修改对应的DOM；
  • 插件化：Vue核心库不包含Router、Ajax等功能，但能够很是方便的加载对应的组件；

二、Vue与React的区别

• 相同点：
  • 都支持服务器端的数据渲染；
  • 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件；
  • 将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库；
  • 都有Virtual DOM，组件化开发，经过props参数进行父子组件数据的传递,都实现webComponent规范；
  • 都有支持native的方案，React的React native，Vue的weex；
  • 都有管理状态，React有redux,Vue有本身的Vuex（自适应vue，量身定作）；
• 不一样点：
  • React严格上只针对MVC的view层，Vue则是MVVM模式；

  • virtual DOM不同，vue会跟踪每个组件的依赖关系，不须要从新渲染整个组件树；

                而对于React而言，每当应用的状态被改变时，所有组件都会从新渲染，因此react中会须要shouldComponentUpdate这个生命周期函数方法来进行控制；

• • 组件写法不同，React推荐的作法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in js'；

                Vue推荐的作法是webpack+vue-loader的单文件组件格式,即html，css，js写在同一个文件；

• • 数据绑定: vue实现了数据的双向绑定，react数据流动是单向的；

  • state对象在react应用中不可变的，须要使用setState方法更新状态；

    在vue中，state对象不是必须的，数据由data属性在vue对象中管理；

三、MVC与MVVM的理解

• MVC

　　   MVC分为Model（模型层）、View（视图）、Controller（控制器）三层，View与Model不直接联系，经过Controller进行联系，所以也说Controller是View和Model的协调者；

• • 当没有用户操做的状况下：基本联系都是“单向”的，model用来存放data

                   

• • 存在用户操做：

• MVVM

          MVVM就是把MVC的Controller改为了ViewModel，View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示，这种自动同步是由于ViewModel中的属性实现了Observer，当属性变动时都能触发对应的操做；