vue常见面试题

1.单页应用（SPA）

2.MVVM

3.Vue双向绑定原理

4.data为什么是函数

5.v-if和v-show的区别

6.computed，watch，methods的区别

7.vue的生命周期

8.父子组件生命周期顺序

父cheated----子created----子mounted----父mounted
父before update----子before update----子updated----父uplated

9.vue组件通信方式

10.keep-alive组件

11.slot插槽

作用域插槽

//父组件
<template>
  <div>
    <Zi>
      <template v-slot:default="{ user }">
        {{ user.age }}
      </template>
    </Zi>
  </div>
</template>
<script>
import Zi from './zi'

export default {
  components: {
    Zi
  }
}
</script>

//子组件
<template>
  <div>
    <slot :user="user">
      {{ user.name }}
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: 'zhao',
        age: 10
      }
    }
  }
}
</script>

具名插槽

//父组件
<template>
  <div>
    <Zi>
      <template v-slot:header>
        <h1>我是标题：具名插槽</h1>
      <template>
      <template>
        <p>我是内容：匿名插槽</p>
      <template>
    </Zi>
  </div>
</template>
<script>
import Zi from './zi'

export default {
  components: {
    Zi
  }
}
</script>

//子组件
<template>
  <div>
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>

12.vue检测数组和对象的变化

13.虚拟DOM

14.vue中key的作用

15.nextTick的原理

16.vuex

17.vue-router的2种模式

18.vue-router的导航钩子