Vue面试真题4 -- 插槽、虚拟DOM、MVVM模式、keep-alive

Vue面试真题4 – 插槽、虚拟DOM、MVVM模式、keep-alive

在Vue面试真题3 – swiper、路由懒加载、vue-loader中我们学习了swiper、路由懒加载、vue-loader，本文将继续重点跟大家介绍前端面试中经常遇到的一些与Vue相关的第4个重点内容，主要包括插槽、虚拟DOM、MVVM模式、keep-alive。废话不多说，一起来看看吧！

1-插槽

• 常见面试问题：用过插槽吗？用的是具名插槽还是匿名插槽？
• ue中的插槽slot是一个非常好用的东西,说白了，就是一个占位的。
• 在vue当中，插槽包含三种：默认插槽（匿名）、具名插槽、作用域插槽。
• 匿名插槽：就是没有名字的，只要默认的，都填到这里。
• 具名插槽：指的是具有名字的。
• 使用示例

HelloWorld.vue

	<template>
	  <div>
	    <About>
	      <h2>这是Hello World组件的内容h2>
	      <div slot="footer" slot-scope="aaa">
	        {{aaa}}
	        这是底部
	      div>
	      <div slot="header" slot-scope="aaa">
	        {{aaa}}
	        这是头部
	      div>
	    About>
	  div>
	template>
	
	<script>
	import About from '@/components/About.vue'
	export default {
	  name: 'HelloWorld',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App'
	    }
	  },
	  components: {
	    About
	  }
	}
	script>
	
	<style scoped>
	
	style>

About.vue

	<template>
	  <div>
	    <h2>关于插槽h2>
	    <slot name="header">slot>
	    <slot>slot>
	    <slot name="footer" say="hello">slot>
	  div>
	template>
	
	<script type="text/ecmascript-6">
	export default {
	  name:'about',
	  data () {
	    return {}
	  },
	  methods: {},
	}
	script>
	
	<style>
	style>

2-vue虚拟DOM

• 常见面试问题：说说你对vue虚拟DOM的理解
• 什么是虚拟DOM
  • 说白了就是以js对象的形式去添加dom元素。
  • 本质上是优化了diff算法。
  • 采用了新旧dom的对比，获取差异的dom，一次性更新到真实的dom上。

注意：

• 虚拟dom本身也有自己的缺陷，它更适合批量修改dom。
• 尽量不要跨层级修改dom。
• 设置key可以最大程度地利用节点。

3-vue的MVVM模式

• 常见面试问题：如何理解Vue的MVVM模式
• mvvm 和 mvc 之间的区别
  • mvc 指的是model view controller。
  • view <–> controller --> model <–> view。
  • mvvm也分为三层：model view viewModel，而vue就是专注于view和viewModel的框架。
• mvvm 和 mvc 的数据流动图：
• mvvm 数据流动图
  
• mvc 数据流动图
  

4-vue中的keep-alive

• 常见面试问题：Vue中的keep-alive的作用
• 什么是keep-alive?
  • 说白了，它能让不活动的组件"活着"。
  • 它提供了include 与 exclude 两个属性，允许组件有条件的缓存。
• 实现的原理是什么：
• 其实就是在created的时候将需要缓存的vnode节点放到cache中，在render的时候根据name再进行取出
• 使用示例

	<keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    keep-alive>