# Vue 的优点

简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；

# 1.MVVM

1. 先说一下什么是 MVC 模式：

MVC：Model-View-Controller (模型 - 视图 - 控制器)。是之前最早的框架，从前台传递给后台统一称之为 MVC，比如前端视图 (View)、后端的数据库（Model），用户操作界面想要获取数据就向后台服务器发送请求，请求会被路由拦截，这时候会调用对应的控制器 (Controller) 来处理，控制器会获取数据，然后返回给前端，页面重新进行数据渲染。这种方向是单向的。

2. 随着前端的发展，对视图层又进行了抽离，抽离出 VM，传统的前端会将数据手动渲染到页面上，MVVM 模式不需要用户收到操作 dom 元素，将数据绑定到 ViewModel 层上，会自动将数据渲染到页面中，视图变化会通知 ViewModel 层更新数据。ViewModel 就是我们 MVVM 模式中的桥梁。vue 的框架就是一个典型的 MVVM，它充当了一个 VM 层，我们可以直接把数据挂到 vue 上，我们通过 vue 可以直接渲染我们的视图，而且我们的视图也可以直接的去更改，在更改的时候 vue 会监听当前视图的变化，然后把数据再写回数据层，这就是一个双向的过程，所以 MVVM 就是一个双向绑定的过程。在 vue 中数据都是响应式的，数据变化呢会驱动视图，那视图更改了数据也会发生变化，比如 v-model 就实现了一个双向数据绑定的过程。
简而言之：MVVM 是响应式，双向数据绑定，是指数据层（Model）- 视图层（View）- 数据视图（ViewModel）的响应式框架。

view 层不直接与 model 层通信，他们只能通过 view-model 层通信。

# Model: 数据层：

对应 vue 组件的 data,props 属性。

# View: 视图层：

相当于用户操作页面，view-model 对 model 更新的时候，会通过数据绑定更新到 view.

对应 vue 组件中的 template 和 style 的部分。

# ViewModel: 业务逻辑层：

业务逻辑层，view 需要什么数据，ViewModel 就提供什么数据，view 有哪些操作，ViewModel 就响应这些操作，View 和 ViewModel 两种交互方式：双向数据传递（数据属性和 data binding）和单向传递操作（命令属性）；由于 ViewModel 的双向数据绑定，当 Model 发生变化时，ViewModel 就会更新，ViewModel 变化，Model 也会更新。

对应继承 Vue 的组件实例。

# 2.Vue 生命周期

任何事物的生命周期都是实例的创建到销毁的这一过程，对每一过程详细化：

分为八个阶段：

# 1. 创建前 / 后

在 beforeCreated 阶段，vue 实例的挂载元素 $el 和数据对象 data 都为 undefined，还未初始化。
在 created 阶段，vue 实例的数据对象 data 有了， $el 还没有。

# 2. 挂载前 / 后

在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。
在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

# 3. 更新前 / 后

当 data 变化时，会触发 beforeUpdate 和 updated 方法。

# 4. 销毁前 / 后

在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

# 3.created 和 mounted 的区别

created: 在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted: 在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

# 4.v-show 和 v-if 的区别

v-show 指令是通过修改元素的 display 的 CSS 属性让其显示或者隐藏；
v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果；
使用 v-show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v-if 更加合理。

# 5.v-model 和 v-bind 的区别

v-bind 指令用于响应地更新 HTML 特性，绑定属性；eg: v-bind:herf="xxx" 可以简写成 => :herf="xxx"

v-model 绑定数据

# 6.Vue 中组件生命周期调用顺序是什么样的？

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
加载渲染过程
父 beforeCreate-> 父 created-> 父 beforeMount-> 子 beforeCreate-> 子 created-> 子 beforeMount- > 子 mounted-> 父 mounted
子组件更新过程
父 beforeUpdate-> 子 beforeUpdate-> 子 updated-> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy-> 子 beforeDestroy-> 子 destroyed-> 父 destroyed

Vue