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还给你提供了作用域的选择
- 另外开发阶段,还提供热加载