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 />

    
    <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)" />
  
template>

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

2. $nextTickVue是异步渲染，data改变之后DOM不会立即渲染，$nextTick会在DOM渲染之后触发，以获取最新的DOM节点

<template>
  <div id="app">
    <ul ref="ul1">
      <li v-for="(item, index) in list" :key="index">{{item}}li>
    ul>
    <button @click="addItem">添加一项button>
  div>
template>

<script>
export default {
  name: "app",
  data() {
    return {
      list: ["a", "b", "c"]
    };
  },
  methods: {
    addItem() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);

      // 1. 异步渲染，$nextTick 待 DOM 渲染完再回调
      // 2. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
      const ulElem = this.$refs.ul1;
      console.log(ulElem.childNodes.length);
      this.$nextTick(() => {
        // 获取 DOM 元素
        const ulElem = this.$refs.ul1;
        console.log(ulElem.childNodes.length);
      });
    }
  }
};
script>

3. slot
   slot就好比插板的插孔，使用具有slot的组件时，会根据其children（react中的概念）进行对应位置的渲染
   插槽分为普通插槽、作用域插槽、具名插槽

• 普通插槽

// index.vue
<NormalSlot :url="website.url">{{website.title}}NormalSlot>

// NormalSlot.vue
<template>
  <div>
    <a :href="url">
      <slot>这是默认内容slot>
    a>
  div>
template>

<script>
export default {
  props: {
    url: String
  },
  data() {
    return {
      website: {
        url: "https://imooc.com",
        title: "程序员的梦工厂"
      }
    };
  }
};
script>

<style>
style>

• 作用域插槽
  为了让父级访问到子组件的数据，这个时候使用的插槽就是作用域插槽

// index.vue
<ScopedSlot :url="website.url">
    <template v-slot:default="slotProps">{{slotProps.website.title}}template>
ScopedSlot>


// ScopedSlot.vue
<template>
  <div>
    <a :href="url">
      
      <slot :website="website">这是默认内容slot>
    a>
  div>
template>

<script>
export default {
  props: {
    url: String
  },
  data() {
    return {
      website: {
        url: "https://imooc.com",
        title: "程序员的梦工厂"
      }
    };
  }
};
script>

<style>
style>

• 具名插槽

// index.vue
<NamedSlot :url="website.url">
      <template v-slot:header="{header}">{{header}}template>
      <template v-slot:body="{body}">{{body}}template>
      <template v-slot:default="{main}">{{main}}template>
      <template v-slot:footer="{footer}">{{footer}}template>
NamedSlot>

// NamedSlot.vue
<template>
  <div>
    <a :href="url">
      <slot name="header" :header="header">这是默认内容slot>
      <slot name="body" :body="body">这是默认内容slot>
      <slot name="footer" :footer="footer">这是默认内容slot>
      <slot :main="main">这是默认内容slot>
    a>
  div>
template>

<script>
export default {
  props: {
    url: String
  },
  data() {
    return {
      website: {
        url: "https://imooc.com",
        title: "程序员的梦工厂"
      },
      header: "这是header",
      body: "这是body",
      footer: "这是footer",
      main: "这是main的内容"
    };
  }
};
script>

<style>
style>

4. 动态、异步组件
5. keep-alive
6. mixin