Vue 面试题整理-2020 （1）

1、vue的生命周期
　　初始化：
　　beforeCreate：一般没啥用，数据没挂载，DOM 没有渲染出来
　　created：数据已经挂载，但是 DOM 没有渲染出来，这个钩子函数里面可以做一些异步的操作，并且在这个钩子函数里面更改数据不会影响到运行时钩子函数。
　　beforeMounte：这个函数代表着 DOM 快要被渲染出来了，但是还没有被渲染出来，跟 created 一样，做一些异步的操作
　　mounted：数据已经挂载，真实 DOM 也已经渲染出来了。
　　运行中：
　　beforeUpdate：当数据改变的时候才会执行这个函数，在这个函数里面拿到的是改变之前的数据，千万不能在这个里面更改数据，否则会造成死循环
　　updated：拿到的是更新之后的数据，在这函数里面，生成新的 DOM ，跟上一次的虚拟 DOM 做对比，比较出差异之后，然后再渲染真实的 DOM ，当数据引发 DOM 重新渲染的时候，在这个钩子函数里面就可以获取到真实的 DOM。
　　销毁时：
　　beforeDestroy：销毁前，做一些善后的操作
　　destroyed：数据的双向绑定，监听都删除了，但是真实的 DOM 还是存在的
2、什么是 MVVM？与 MVM 的区别。
　　mvvm 是一种简化用户界面的事件驱动编程方式
　　View是视图层，也是用户交互层，主要是由 html 和 css 构建
　　Model是视图层，泛指后端进行的各种逻辑处理和数据操控
　　ViewModel是指视图数据层，在这一层，前端开发者对从后端获取到的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
　　MVVM 主要是解决 MVM 的反馈不即使的问题。
3、完整的生命周期函数到底是什么？
　　beforeCreate：基本什么都干不了，data 没有注入到 vue 里面，获取不到 data 信息，做一些预处理功能，
　　created：数据可以获取，并且在钩子函数中更改数据不会调用钩子函数的执行
　　beforeMount：此时还没有生成 html 到页面中。
　　mounted：初始化阶段最后一个钩子函数，可以操作真实 DOM 了
数据更新的时候，先调用 beforeUpdate，然后数据更新引发视图渲染完成之后，才会执行 updated
4、VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？
　　为什么要封装组件？
　　主要就是为了解耦，提高代码复用率。
　　什么是组件？
　　页面上可以复用的都称之为组件
　　它是 HTML、CSS、JS 的聚合体。
　　组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
　　组件中的 data 为什么是一个函数
　　让每个返回的实例都可以维护一份被返回对象的独立的拷贝。
　　（延申）
　　什么是模块？
　　相当于业务逻辑块，把同一类的项目里的功能逻辑进行需求性的封装。
　　模块化开发：就是将 js 文件按照功能分离，根据需求引入不同的文件，源于服务端
　　组件化开发：具备单个可移植性，即“随用随加载”，不需要为其准备复杂的基础条件，组件是声明式，非命令式
5、axios 是什么？
　　axios 主要是用来向后台发送请求。支持promise
　　axios 支持并发请求，可以同时请求多个接口
　　axios 提供了拦截器。
　　axios 可以防止 跨站请求伪造。也就是钓鱼网站
　　axios 拦截器：
　　分为 request 请求拦截和 response 响应拦截
　　request 请求拦截：发送请求前统一处理。例如：设置请求头 headers
　　response 相应拦截：是根据响应的代码来进行下一步的操作。例如：由于当前的 token 过期，接口返回 401 未授权。那么我们就要跳转到登陆界面
axios/fetch 是基于 promise。后者主要利用 callback 的形式
fetch 脱离了 xhr，是新的语法，默认不传 cookie。另外也监听不到请求进度
6、VUEX 是什么？怎么使用？那种场合能用？
　　vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）
　　vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）
　　state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据
　　应用场合：购物车的数据共享、登入注册
7、vue 的指令用法
　　v-if　　条件渲染指令
　　v-bind　　绑定属性指令
　　v-on　　监听事件指令
　　v-for　　循环渲染指令
　　v-text　　渲染文本
8、导航钩子？
　　vur-router
　　spa 单页面应用：指的是根据检测地址栏的变化将对应的路由组建进行切换
　　也就是说，一个项目里面只有一个完整的 HTML 页面。其余的都是 HTML 组件，页面之间跳转刷新，都是组件之间切换，减少了 http 请求的发送，提高了用户体验，
　　原理就是 js 感知到 url 的变化，通过这一点，可以用 js 动态的将当前页面内容清除，然后将下一个页面的内容挂载到当前页面上，这个时候路由不是后端做，而是前端完成，判断到底是显示哪个页面，清除不需要的，显示需要的，这个过程就是单页面应用。
　　好处就是:良好的交互体验，良好的前后端分离模式，减轻了服务器的压力，公用一套代码。
　　history hash
　　声明式导航：router-link
　　history：这个模式会直接改变 url 地址，需要后端给我们配置。
　　hash：这个模式检测到 url 地址栏 # 后面的路径标识符的更改，从而触发浏览器的 hashchange 事件，然后通过 location.hash 得到当前的路径标识符，在进行路由跳转操作。
　　一级路由、二级路由？ children
　　路由跳转、两种方式：router-link to this.$router.push()
　　路由守卫 拦截器
拦截器：request请求拦截器和response响应拦截器
　　　　request 请求拦截：发送请求前同一处理，
　　　　例如：设置请求头 headers、应用的版本号、终端类型等
　　　　response 响应式拦截：有时候我们要根据响应式的状态来进行下一步操作，
　　　　例如：由于当前的 token 过期，接口返回 401 未授权，我们就需要进行重新登录的操作。
　　导航钩子就是 vue 中路由 vue-router
分类：
beforeEach 在路由切换开始的时候调用
afterEach 在路由切换离开的时候调用
局部到单个路由
beforeEnter
组件的钩子函数
beforeRouterEnter
beforeRouterUpdata
beforeRouteLeave
三个参数：
to 即将进入的目标对象
from 导航要离开的导航对象
next 是一个函数，调用 resolve 执行下一步
$router：是路由操作对象，只写对象
$route：路由信息对象，只读对象
9、v-model 是什么？
　　用于表单的数据双向绑定的指令
　　有两个操作：
　　　　1、v-bind 绑定了一个 value 的属性
　　　　2、v-on 把当前元素绑定到一个事件上