前端面试题——Vue篇

1. 关于Vue 的生命周期

答：
	beforeCreated —— 创建前
	created —— 创建后
	beforeMount —— 加载前
	mounted —— 加载后
	beforeUpdate —— 更新前
	updated —— 更新后
	beforeDestroy —— 销毁前
	destroyed —— 销毁后

2. 谈谈你对keep-alive 的理解

答:
	keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁.（概念）
	
	keep-alive是系统自带的一个组件，主要用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验（作用）
	
	列表页进入详情页，如果在列表页点击的都是相同的 ，详情页就不用请求多次了，直接缓存起来就行了，如果点击的不同，则需要重新请求数据（使用场景）

使用方法一：在App.vue中使用keep-alive标签，表示缓存所有页面

  <div id="app">
  	<keep-alive>
	    <tar-bar></tar-bar>
	    <div class="container">
	      <left-menu></left-menu>
	      <Main />
	    </div>
    </keep-alive>
  </div>

使用方法二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分
  	<keep-alive include='cc'>
      <router-view/>
    </keep-alive>
// 2. 将不缓存 name 为 cc 的组件
	<keep-alive exclude='cc'>
  	  <router-view/>
	</keep-alive>
// 3. 还可使用属性绑定动态判断
	<keep-alive :include='includedComs'>
  	  <router-view/>
	</keep-alive>

使用方法三：在router目录下的index.js中，

	//使用meta:{keepAlive = true },表示需要缓存
 const routes = [
  {
    path:'/',
    component:Home,
    meta:{
        keepalive:true
    }
  },
  {
    path:'/login',
    component:Login
  },
   {
      path:'/edit',
      component:Edit,
      meta:{
          istoken: true
      }
   },
  {
      path:'/home',
      component:Home,
      meta:{
          keepalive:true
      }
  }
// 第二步 在App.vue中进行判断

<div id="app">
    <!--keep-alive 表示页面不会被销毁，即保持页面状态-->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"></router-view>
  </div>

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例

3.v-if与v-show 的区别

答： 
	v-show 是通过控制display属性来进行DOM的显示与隐藏，主要用于频繁操作
	v-if 是直接对DOM节点的销毁与销毁，相对于v-show  更加损耗性能

1. v-show不支持语法，即v-show="false"对template元素来说不起作用。但是此时的template元素支持v-if、v-else-if、v-else、v-for这些指令
2. v-if切换时候会实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。

4.v-for 与v-if 的优先级

答： 
	1. vue2中，v-for的优先级高于v-if,把它们放在同一个标签上时，页面每次渲染的时候都会重复的进行判断是十分消耗性能的
	2. 在vue3中，又恰好相反v-if的优先级是高于v-for的，同样vue3也不能把它们两者写在一起，正因为v-if优先于v-for,并且v-if又依赖v-for的数据源，在这个情况下将会出现报错的情况。
	3. .一般我们在处理v-if和v-for连用的场景时我们可采取下列方式：
	  (1) .在循环渲染之前先用filter过滤下不需要的数据，也可以使用computed计算属性进行过滤
	  (2)   .如果需要根据条件渲染单个项，可以将 v-if 放在内层元素上。
	4. 将v-for和v-if写在同层级和v-for中嵌套v-if有什么区别呢？
		- 将 v-if 和 v-for 写在同一层级时，Vue 会在渲染组件时，先根据 v-for 遍历出所有的子元素，并将它们都生成对应的 Virtual DOM，然后再根据 v-if 条件判断是否需要将这些元素渲染出来。如果元素不符合条件，则将它们对应的 Virtual DOM 从渲染队列中移除。
		- 将 v-if 放在内层元素上时，Vue 可以先根据 v-for 遍历出所有的子元素，但只有符合 v-if 条件的子元素会被渲染，不符合条件的子元素不会生成对应的 Virtual DOM。这样可以避免不必要的性能消耗，提高页面渲染速度。

5. ref 是