Vue概况

Vue是什么？

Vue本身不是一个框架，Vue结合周边生态构成一个渐进式框架。所谓渐进式就是你需要用什么，就引入相应的插件，由浅入深。

• 声明式渲染：在页面new一个vue实例，在data里声明变量，在模板里使用变量。
• 组件系统：需要组件系统时，定义一个component。
• 客户端路由：引入vue-router进行路由管理。
• 大规模状态管理：引入vuex，便于页面之间、不同组件之间共享状态，如用户信息。
• 构建工具：vue使用的是webpack，进行版本号管理、打包压缩、ES6解码、sass/less等的编译。

Vue核心思想

• 数据驱动：传统的jQuery开发中，我们都是用js去操作DOM，非常耗性能，并且js和DOM高度耦合，而在vue中，我们只是用js去调用接口，查询数据，然后将查询结果保存在data中，只需要关心数据层面，而不需要考虑如何去改变DOM节点。将数据拼装好后，整个页面就构建出来了。
• 组件化：随着业务量的猛增，一个js文件中包含了太多的业务，不利于团队合作。我们需要将页面之间公共的部分抽离出来，形成一个组件，然后在需要该组件的时候嵌入，使得组件可以高度复用。同时团队之间按照业务模块进行划分，也会提高开发效率。

MVVM

Vue中的MVVM

Vue通过MVVM实现数据绑定和自动同步。View层就是视图层，即DOM，ViewModel是创建的vue实例，Model是模型层，即原生js对象。当用户发生了一个行为修改了DOM元素之后，这个修改的行为会被ViewModel监听，ViewModel监听到之后，会去修改Model的数据，最后通过ViewModel的数据拼装，改变View。

MVVM优点

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，并且Model 和 ViewModel 之间的交互是双向的。因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue如何实现双向数据绑定？

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。getter在获取值时触发， setter在修改值时触发。

  <input type="text" id="username">
  <br>
  <span id="uname"></span>

  <script>
    var obj = {};
    Object.defineProperty(obj, "username", {
        get(){
            console.log('get')
        },
        set(val){
            document.getElementById("uname").innerText =val;
            document.getElementById("username").value =val;
            console.log('set')
        }
    });
    document.getElementById("username").addEventListener("keyup", (e)=> {
       //触发setter
       obj.username = e.target.value;
    });
  </script>

Vue和React对比

相同点

• 都使用Virtual DOM。Virtual DOM就是在js的内存里去构建一个类似于DOM的对象，拼装它的数据，拼装完成后进行整体的解析渲染，然后一次性插入到HTML的DOM片段里。在内存里面操作是非常快的。
• 轻量级。相对于Angular。
• 响应式组件。在页面上改变数据后，组件内也会实时的发生变化。
• 支持服务端渲染。
• 易于集成路由工具、状态管理工具和打包工具。

不同点

Vue：

• Vue 的 Virtual DOM 实现相对更为轻量一些
• Vue体积相对更小
• 提供了模板和渲染函数的弹性选择
• CSS具有组件作用域
• Weex 在积极发展中，成熟度还不能和 React Native 相抗衡

React：

• 更适用于大型应用
• 同时适用于Web端和原生App
• 更多大的生态圈和更多的支持工具