vue面试题考点和重要知识复习

题目

• v-show和v-if的区别和使用场景
  v-show：渲染条件为false时，正常渲染，只不过被隐藏了。用于频繁切换某个组件的场景
  v-if：渲染条件为false时，不渲染该段html。用于切换不频繁或一次性渲染的场合

• 为什么v-for里面不要用v-if
  因为v-for比v-if计算优先级高一些，所以在计算渲染模板的时候先会循环，在循环里面进行v-if判断，这样相当于做了若干次相同的判断，浪费了性能

• 为何v-for中要用key

• 描述Vue组件生命周期（有父子组件的情况）

• Vue组件如何通讯

• 描述组件渲染和更新的过程

• 双向数据绑定和v-model的实现原理

• 基于Vue设计一个购物车（组件结构， vuex state数据结构）

组件间通信

1. 父子组件通过props和$emit
2. 任意组件使用eventBus

单个组件的生命周期

• 挂载阶段

1. 初始化：beforeCreate、created
2. 挂载：beforeMount、mounted

• 更新阶段
  beforeUpdate、updated
• 销毁阶段
  beforeDestroy、destroyed

父子组件的生命周期

1. 创建：父组件created之后，子组件created
2. 挂载：子组件mounted之后，父组件mounted
3. 更新：父组件beforeUpdate先更新数据，子组件更新接收的数据；子组件完成更新updated，父组件完成更新
4. 销毁：父组件beforeDestroy完成清理副作用，子组件清理副作用；子组件销毁，父组件销毁

Vue高级特性

1. 自定义v-model

// index.vue
<template>
  <div>
    <p>vue 高级特性</p>
    <hr />

    <!-- 自定义 v-model -->
    <p>{
  {name}}</p>
    <CustomVModel v-model="name" />
  </div>
</template>

<script>
import CustomVModel from "./CustomVModel.vue";
export default {
    
  components: {
    
    CustomVModel
  },
  data() {
    
    return {
    
      name: "双越"
    };
  }
};
</script>

// CustomVModel.vue
<template>
  <input type="text" :value="text1" @input="$emit('change1', $event.target.value)" />
  <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change 和 model.event 要对应起来
        3. model.prop属性值、props.xxx、:value="xxx"要对应起来
  -->
</template>

<script>
export default {
    
  model: {
    
    prop: "text1", // 对应 props text1
    event: "change1"
  },
  props: {
    
    text1: String,
    default() {
    
      return "";
    }
  }
};