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个钩子函数,仅影响实例本身和插入插槽内容的子组件,而不是所有子组件