Vue面试真题1 -- 生命周期函数、组件封装、axios

本文重点跟大家介绍前端面试中经常遇到的一些与Vue相关的第1个重点内容，主要包括vue生命周期函数详解、vue组件封装、axios。废话不多说，一起来看看吧！

前端小白进阶之旅

1252人浏览 · 2022-10-23 12:01:30

前端小白进阶之旅 · 2022-10-23 12:01:30 发布

Vue面试真题1 --生命周期函数、组件、axios

Vue面试真题1 -- 生命周期函数、组件封装、axios

Vue面试真题1 – 生命周期函数、组件封装、axios

本文重点跟大家介绍前端面试中经常遇到的一些与Vue相关的第1个重点内容，主要包括vue生命周期函数详解、vue组件封装、axios。废话不多说，一起来看看吧！
磨刀不误砍柴工，我们先回顾一下Vue，然后再正式开始面试真题的介绍。

1-vue介绍

1-1 关于vue

vue 是由饿了么ued团队开发并维护的一个渐进式js框架
vue 是一个mvvm的框架

1-2 如何使用vue去构建项目

使用vue-cli脚手架工具构建项目
直接引入vue.js进行项目的构建

2-vue生命周期函数详解

所有的生命周期钩子的this上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。

vue 生命周期分为四个阶段
- 组件创建时（creating）
  - beforeCreate：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
  - created：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el、property 目前尚不可用。
- 组件渲染时（rendering）
  - beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
    注意：该钩子在服务器端渲染期间不被调用。
  - mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
    注意：
  - mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick.
  - 该钩子在服务器端渲染期间不被调用。
- 组件更新时（updating）
  - beforeUpdate：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
    注意：该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
  - updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
    注意：
  - 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
  - mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick.
  - 该钩子在服务器端渲染期间不被调用。
- 组件卸载时（creating）
  - activated：被 keep-alive 缓存的组件激活时调用。
    注意：该钩子在服务器端渲染期间不被调用。
  - deactivated：被 keep-alive 缓存的组件失活时调用。
    注意：该钩子在服务器端渲染期间不被调用。
  - beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
    注意：该钩子在服务器端渲染期间不被调用。
  - destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
    注意：该钩子在服务器端渲染期间不被调用。

3-vue组件封装

常见面试问题：Vue组件封装过程（怎样封装一个Vue组件？）
封装组件的目的就是为了解耦。
通用组件必须具备高性能、低耦合的特性（往往我们还会在通用组件留一个插槽）。

为什么自定义组件data必须是一个函数？

主要是为了防止组件与组件之间声明的变量互相影响。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>vue组件封装</title>
	    <script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
	        <Header></Hheader>
	        <Footer></Footer>
	    </div>
	    <template id="header">
	        <div>
	            <p>{{msg}}:<input></p>
	        </div>
	    </template>
	    <script type="x-template" id="footer">
	        <div>
	            这是组件底部
	        </div>
	    </script>
	    <script>
	        var Header = {
	            template: '#header',
	            date() {
	                return {
	                    msg: '你的昵称'
	                }
	            }
	        }
	        var Footer = {
	            template: '#footer'
	        }
	        var vm = new Vue({
	            el: '#app',
	            components: {
	                Header,
	                Footer
	            }
	        });
	    </script>
	</body>
	</html>

4-axios

常见面试问题：axios是什么？怎么使用？描述使用它实现登录功能的流程
- axios 是基于Promise的，用于浏览器和nodejs的一个http客户端。
- 主要用于向后台发送请求，还有就是在请求中做更多的控制。
优点
- 支持Promise
- 提供了一些并发的方法，比如Promise.all
- 提供拦截器（守卫）
- 支持CSRF（跨站请求伪造）
axios fetch ajax(jquery) 的区别
- 前两者都是支持Promise的语法，后者默认是使用callback方式。
- fetch本质上脱离xhr,是新的语法（有自己的特性，默认不传cookie,不能像xhr这样去监听请求的进度。
axios使用示例

	<script src="./js/axios.min.js"></script>
	<script>
	    axios.get('https://ku.qingnian8.com/school/list.php')
	    .then((res) => {
	        console.log(res);
	    }).catch((err) => {
	        console.log(err);
	    });
	
	    axios.post('https://ku.qingnian8.com/school/list.php', {'参数': 123})
	    .then((res) => {
	        console.log(res);
	    }).catch((err) => {
	        console.log(err);
	    });
	</script>

拦截器示例

	// http request 拦截器
	axios.interceptors.request.use(
	    config => {
	        if(Store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
	            config.headers.Authorization = `token ${store.state.token}`;
	        }
	        return config;
	    },
	    err => {
	        return Promise.reject(err);
	    }
	);
	
	// http response 拦截器
	axios.interceptors.response.use(
	    response => {
	        return response;
	    },
	    error => {
	        if(error.response) {
	            switch (error.response.status) {
	                case 401: //返回401 清除token信息并跳转到登录页面
	                    store.commit(type.LOGOUT);
	                    router.replace({
	                        path: '/login',
	                        query: {redirect: router.currentRoute.fullPath}
	                    });
	            }
	        }
	        return Promise.reject(error.response.data);  // 返回接口返回的错误信息
	    }
	);