简述Vue原理(MVVM设计模式)

前端框架Vue使用了mvvm设计模式，mvvn=m+v+vm，它们分别代表什么呢？

• v代表的是view视图层，可以将该层理解为html页面中的元素，形如：

<div id="app">
    {{ message }} 
</div>

• m代表的是model模型数据层，里面包含了要显示到view层的数据，形如：

    data: {
        message: 'Hello Vue!',
    }

• vm代表的是viewModel控制器层，该层可以将model层中的数据显示在view层，在model中的数据发生变化时，能够实时地修改view层的数据，形如：

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
});

在这里你也能够发现model层是被包含在viewModel层中的，这就是Vue框架设计的三层；刚刚我们讲到viewModel控制器层可以获知model中的数据被修改并将最新数据传给view层，这是怎么实现的呢？
这里要说到Vue的两大子系统：虚拟dom树系统、数据响应系统。

• 虚拟dom树系统
  在创建vue对象new Vue()时，浏览器会扫描页面中的所有元素，并保存未来可能发生变化的元素，将它们集合起来形成一个dom树对象
• 数据响应系统
  该系统会监听model层的数据变化，但数据变化时会通知虚拟dom树对象，遍历dom树，查找被监听到的元素，修改该元素的内容

应用两大子系统，Vue可以实现数据的实时更新。