您的账号数据已迁移至用友开发者中心，将要前往用友开发者中心公有云定价，确定要继续吗？

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

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 的响应式原理是核心是通过 ES5 的保护对象的Object.defindeProperty中的访问器属性中的get和set方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

深度监听obj，需要递归到底，一次性计算量大，如果数据过大页面，页面可能会卡死

DOM操作是非常耗时的，Vue 和React 是数据驱动视图，就是 通过 虚拟DOM(vdom)来解决的这个问题

h 是一个函数，接收三个参数（标签或选择器，属性，子节点数组），返回一个vnode结构；

patch(vnode, newVnode); 表示更新已有的内容（具体怎么计算更新对应的内容就是使用diff算法）

解析模板为render函数（一般在开发环境已经完成，vue-loader）4

如果模板中没有用的data数据就不会触发getter,因为和视图没关系（vue里面的优化）

3、getter方法收集依赖（通俗点就是,在模板里面触发了哪个变量的getter,就把哪个变量观察起来）

4、在依赖中setter修改data中的数据的时候，Notify看下修改的那个数据是不是之前被观察起来的

5、如果是之前观察起来的，就重新渲染（re-render），重新生成render函数,生成newVdom形成一个闭环

上面的代码如果放在本地html 文件中运行 js代码会报错，需要放在web服务器

history 模式需要后端配合，就是无论用户访问什么路由，所有路由的切换都由前端来做，后端只需要返回index.html的文件，如果后面没有配置兼容，当访问user这个路由，点击刷新，就会报user页面找不到。