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

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

  • Vue面试真题1 -- 生命周期函数、组件封装、axios
    • 1-vue介绍
      • 1-1 关于vue
      • 1-2 如何使用vue去构建项目
    • 2-vue生命周期函数详解
    • 3-vue组件封装
    • 4-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);  // 返回接口返回的错误信息
	    }
	);

参考链接: https://v2.cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

你可能感兴趣的:(#,vue面试真题,vue学习记录,vue.js,面试,前端,javascript,开发语言)