VUE常见面试题

1. 什么是动态组件

<component :is="dynComponent"></component>
//is是定义的组件名,可以是一个变量
//可以实现雷士选项卡的功能

2. 父子组件的生命周期的执行顺序

• 先执行父组件的beforecreate,create,beforemount
• 再执行子组件的beforecreate,create,beforemount,mount
• 最后执行父组件的mount

3. 动态改变数组能使视图更新的方法

• push pop shift unshift splice sort reverse
• 通过改变对象地址的方法来实现
• Vue.set和vm.$set
• 如果需要将数组变为空,this.arr = []会同步显示，this.arr.length = 0则不能实时刷新

4. keep-alive如何控制那些组件缓存那些组件不缓存

• 可以在keep-alive上设置include(需要缓存的组件的name属性)或exclude(不需要缓存的组件的name属性)
• 可以在路由表里的meta设置一个变量keepAlive,然后通过$route.meta获取路由参数配合v-if来控制是否使用keep-alive组件

5. vuex什么是数据如何持久化,如何做到

• vuex里面存放的数据,页面一经刷新会丢失,需要通过一定手段使数据缓存
• 存放在localStorage或者sessionStorage里面,进入页面时判断是否丢失,丢失再去localStorage或者sessionStorage里面取
• 使用vuex-persistedstate插件

6. 计算属性如何传参

• 在计算属性里面使用闭包,如:

<template>
  <div class="dashboard-container">
  	<div @click="change">改变百分比</div>
    {{text(index)}}
  </div>
</template>
<script>
export default {
	data() {
	    return {
	      index: 0
	    }
  	},
  	computed: {
		text() {
	      return function(index) {
	        return this.number[index].toFixed(0) + '%'
	      }
	    }
	},
	methods:{
		change() {
      		this.index <= 1 ? this.index++ : this.index--
    	},
	}	
}
</script>

7. watch 如何普通监听,如何深度监听

<template>
  <div class="dashboard-container">
    <div @click="watch">watch监听+1</div>
    <div>普通监听{{c}}</div>
    <div>深度监听{{d}}</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      number: [1, 2, 3],
      a: 0,
      b: {
        c: 0
      },
      c: 0,
      d: 0
    }
  },
  watch: {
    a(val, oldVal) {
      this.c = val
    },
    b: {
      handler(val, oldVal) {
        this.d = val.c
      },
      deep: true
    }
  },
  methods: {
    watch() {
      this.a += 1
      this.b.c += 1
    }
  }
}
</script>

8. 后台管理系统的侧边栏是如何实现的,如何实现多级嵌套

• 首先需要组好子父级路由表
• 再使用elementUl的menu组件,通过v-if判断是否存在子级搭配递归组件来实现多级嵌套
• 详情可以下载vue-element-admin(git地址:git clone https://github.com/PanJiaChen/vue-admin-template.git)查看他们的layou>components>Sidebar文件夹下的index.vue文件和SidebarItem

9. 数据改变但未渲染该如何解决

• 当在data里没有显示的声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用this.$forceUpdate() 强制刷新,调用后只会触发beforeUpdate和updated这2个钩子函数,仅影响实例本身和插入插槽内容的子组件,而不是所有子组件