Ladies and gentlemen，今天我们水一点简单的题目，继续“前端面试题”系类文章。

废话不多说，上干货！

---

1、vue的生命周期

vue的生命周期可以分为4个阶段，每个阶段对应2个钩子函数：

创建阶段：

• beforeCreate函数，在文件被创建之前执行，此时DOM元素和变量都没有被加载，不能获取页面中的变量和方法。
• created函数，在文件被创建之后执行，此时可以获取到变量和方法，但是DOM元素还没有被挂在，通常用来发送数据请求。

挂在阶段：

• beforeMounte函数，在DOM元素被挂载之前执行，此时还能不能对DOM进行操作。
• mounted函数，在DOM元素被挂载之后执行，此时可以对DOM进行操作。

更新阶段：

• beforeUpdate函数，在数据发生更新，但是页面DOM还没有更新之前执行。
• updated函数，在页面DOM也发生更新之后执行。

销毁阶段：

• beforeDistory函数，此时页面还并没有真正销毁，同来用来解绑定时器等。
• distoried函数，此时页面已经被真正销毁。

---

2、v-if和v-show的区别

v-if：通过创建和销毁DOM元素来实现的元素的展示或者隐藏，不适合于频繁的切换

v-show：通过控制元素的display样式属性来实现元素的展示或者隐藏，适合于频繁的切换

---

3、v-model语法糖

v-model是vue的一种语法糖写法，用来实现数据和页面的双向绑定，它的原生写法是通过v-bind和v-on来实现的。

v-bind：我们通过这个方法来将数据绑定到页面上，实现数据向页面的数据流；

v-on：我们通过这个方法，配合$event.target.value的方式，来实现页面先数据的数据流。

---

4、v-for和v-if要避免一起使用

两者同时使用会造成资源的浪费。因为v-for的优先级更高，所以浏览器在渲染的时候会优先将所有的颜色都渲染出来，之后在根据v-if的条件来对这些元素进行判断是否展示。我们通常将v-for外面再套一个div盒子来做v-if的判断。

---

5、$router和$route的区别

$router：全局路由对象，里面包含若干个$route对象。我们通常对其进行.push等操作，控制路由的跳转行为。

$route：当前页面的路由对象，里面只包含当前页面相关的信息。我们通常用来来获取query等路由中包含的参数信息等。

---

6、Vuex的使用

vuex是一款vue的状态管理工具，我们通常用它来存储管理数据。它的核心包含modules、state、mutactions、actions、getters等。

• modules：我们在实际的开发工作中，通常会使用模块化的思想来对数据进行管理，例如每个模块封装一个存储仓库。这个时候我们就可以使用modules来做存储的模块化。

• state：每个存储仓库中的数据状态，我们在这里声明变量，用来存储数据。

• mutactions：我们在这里声明方法，来对 state中的数据状态进行操作，但是这里只能进行同步操作，以避免数据的混乱，它通常会传入两个参数，第一个是state数据，第二个是修改的数据。

• actions：我们在这里声明方法，但是这里的方法可以进行异步操作，例如发送请求、调用muactions中的方法等等。它通常传入两个参数，第一个是context，第二个是修改的数据。

• getters：我们在这里对存库中的数据进行过滤或者建立一对一的映射关系，以便我们更方便的获取数据。

除了上面的这些以外，在实际使用的时候，我们通常使用mapMutactions、mapGetters在computed方法中进行解构运算，以便更方便的使用。

---

7、data为什么是个函数

因为在vue中，每一个组件文件都是一个对象。所以每当组件被调用的时候，如果data只是一个对象，那么每次都是在对同一个对象上的同一个data属性进行操作，这样容易引起数据紊乱。

如果data是一个函数，并且返回 一个对象。那么每次被调用的时候，都会单独开辟出一个存储空间用来存储这个data对象，从而避免数据紊乱。

---

ok，最近鼻炎有点犯了，头昏昏的，今天就更新这么多吧。明天继续~