Description Vue principle (MVVM design pattern)

Vue used front-end framework mvvm design patterns, mvvn = m + v + vm, what do they represent?

• v represents the view view layer, the layer will be appreciated html elements, and the form:

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

• m represents the model data model layer, which layer contains the data to be displayed to view, like this:

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

• Is represented by vm viewModel controller layer, which layer data can be displayed in model view layer, the data in the model changes, can be modified in real-time view of the data layer, the form:

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

Here you can find the model layer is included in viewModel layer, which is the framework for the design of three-Vue; we just talked about viewModel controller layer may know the data model is modified and the latest data to the view layer this is how to achieve it?
Vue here to say to the two major subsystems: the virtual dom tree systems, data response system .

• Virtual dom tree system
  in vue create an object new Vue(), the browser will scan all the elements of the page and save elements may change in the future, they are a collection of objects together to form a dom tree
• Data response system
  that will monitor changes in the data model layer, but will notify dom tree virtual object data changes, traversing the dom tree, looking up listening to the elements, modify the content of the element

Application of two subsystems, Vue can achieve real-time updates of data.