Vue面试真题3 -- swiper、路由懒加载、vue-loader

Vue面试真题3 – swiper、路由懒加载、vue-loader

在Vue面试真题2 – vuex、指令、导航钩子、双向绑定中我们学习了vuex、指令、导航钩子、双向绑定，本文将继续重点跟大家介绍前端面试中经常遇到的一些与Vue相关的第3个重点内容，主要包括swiper、路由懒加载、vue-loader。废话不多说，一起来看看吧！

1-swiper

• 常见面试问题：swiper插件从后台获取数据没问题，css代码也没问题，但是图片不动，应该怎么解决？
• 主要原因是swiper提前初始化了，而这个时候数据还没有完全出来。
• 解决方法主要有两个方向: 一个从swiper入手，一个是从vue入手。
• vue中专门提供了一个方法nextTick(), 用于解决DOM的先后执行问题。
• 解决示例

	<template>
	  <div>
	    <div class="swiper-container">
	      <div class="swiper-wrapper">
	        <div class="swiper-slide">
	          <img src="http://temp.im/640x320" alt="">
	          <img src="http://temp.im/640x300" alt="">
	        </div>
	      </div>
	    </div>
	  </div>
	</template>
	
	<script>
	import Swiper from 'swiper';
	import 'swiper/swiper.min.css';
	export default {
	  name: 'HelloWorld',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App'
	    }
	  },
	  mounted() {
	    this.$nextTick(() => {
	      var myswiper = new Swiper(".swiper-container", {
	        autoplay: true,
	        loop: true,
	        observer: true,
	        observeParents: true
	      });
	    });
	  }
	}
	</script>
	
	<style scoped>
	
	</style>

2-路由懒加载

• 常见面试问题：说一说你对路由懒加载的理解
• 懒加载，也叫延迟加载，即在你需要的时候加载。
• 优点：使首屏加载更快
• 解决示例

	import Vue from 'vue'
	import Router from 'vue-router'
	
	Vue.use(Router)
	
	function resolveView(view) {
	  return () => import(`@/components/${view}.vue`);  // 路由懒加载
	}
	
	export default new Router({
	  routes: [
	    {
	      path: '/',
	      name: 'HelloWorld',
	      component: resolveView('HelloWorld'),
	      meta: {
	        keepAlive: true
	      }
	    },
	    {
	      path: '/detail',
	      name: 'Detail',
	      component: resolveView('Detail'),
	      meta: {
	        keepAlive: true
	      }
	    },
	    {
	      path: '/about',
	      name: 'About',
	      component: resolveView('About'),
	      meta: {
	        keepAlive: false
	      }
	    }
	  ]
	});

3-vue-loader

• 常见面试问题：Vue-loader解释一下
• vue-loader就是一个加载器，能把.vue组件转化成JavaScript模块。
• 为什么我们要转译这个vue组件 ==> 可以动态地渲染一些数据
• 对template、script、style三个标签都做了优化，script中可以直接使用 es6, style也默认可以使用sass,并且style还给你提供了作用域的选择
• 另外开发阶段，还提供热加载