Vue框架

• Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架

 vue原理

引用
众所周知vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。

1、MVVM设计模式

 解释

View是视图，就是DOM；对应视图也就是HTML部分--代表UI组件，它负责将数据模型转化成UI展现出来。 Model是模型，就是vue组件里的data，或者说是vuex里的数据；--代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ViewModel--监听模型数据也就是data的的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。

总结
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewMode进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

由此，我们可以引出vue是响应式的

我们来了解一下MVVM

MVVM：

M: Model，即数据。既然是前端，我们要做的事情肯定是怎么把数据给呈现到界面上了，这里的数据就是我们说的Model，通常呈现形式就是如同样是MVVM的WPF中的对象数据源或者如Vue中的JSON数据。
V: View，即视图。WPF中的xaml界面，或者前端领域中往往指的就是我们的HTML代码，或者说DOM应该也可以。
VM: ViewModel。连接界面View和数据Model的，不管你用的是什么方式，其目的就是使得View的输入能立刻保存到Model中，反之，Model的改变能立刻反应到View界面上。

Vue如何创建

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

• var vm = new Vue({
•   // 选项
• })

通过 $mount

• import Vue from 'vue'
• ​
• const app = new Vue({
•   // el: '#root',
•   template: '<div>{{text}}</div>',
•   data: {
•     text: 0
•   }
• })
• ​
• app.$mount('#root')

作用

数据响应式，通过实例修改数据

• import Vue from 'vue'
• ​
• const app = new Vue({
•   // el: '#root',
•   template: '<div>{{text}}</div>',
•   data: {
•     text: 0
•   }
• })
• ​
• app.$mount('#root')
• // 直接修改实例的数据
• setInterval(() => {
•   app.text += 1
• }, 1000)