面试 Vue 框架八股文十问十答第九期

面试 Vue 框架八股文十问十答第九期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

?点赞?收藏?不迷路！?

1）说一下Vue的生命周期

Vue的生命周期包括以下几个阶段：

• 创建阶段：
  1. beforeCreate： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  2. created： 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event事件回调。但是挂载阶段还未开始，$el属性目前不可见。
• 挂载阶段：
  3. beforeMount： 在挂载开始之前被调用，相关的 render 函数首次被调用。
  4. mounted： el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。此时实例已完成挂载。
• 更新阶段：
  5. beforeUpdate： 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated： 虚拟 DOM 重新渲染和打补丁之后调用。
• 销毁阶段：
  7. beforeDestroy： 实例销毁之前调用。在这一步，实例仍然完全可用。
  8. destroyed： 实例销毁后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

2）Vue 子组件和父组件执行顺序

在Vue中，父组件和子组件的生命周期钩子执行顺序如下：

1. 父组件：
   • beforeCreate
   • created
   • beforeMount
2. 子组件：
   • beforeCreate
   • created
   • beforeMount
   • mounted
3. 父组件：
   • mounted

在更新阶段：

1. 父组件：
   • beforeUpdate
   • updated
2. 子组件：
   • beforeUpdate
   • updated

在销毁阶段：

1. 父组件：
   • beforeDestroy
   • destroyed
2. 子组件：
   • beforeDestroy
   • destroyed

3）created和mounted的区别

• created：
  • 在实例被创建后调用。
  • 此时实例已经完成了数据观测 (data observer)，属性和方法的运算，但是挂载阶段还未开始，$el 属性不可见。
  • 适合执行一些初始化操作，但此时无法保证子组件都已经被挂载。
• mounted：
  • 在实例被挂载后调用。
  • 实例已完成挂载，$el 属性可见。
  • 适合执行需要操作DOM的任务，如获取元素的宽高等，也保证了子组件已挂载。

4）一般在哪个生命周期请求异步数据

通常，在Vue的生命周期中，异步数据请求放在 mounted 钩子中进行。这是因为在 mounted 钩子中，Vue实例已经挂载到DOM上，可以访问到DOM元素，同时也确保了子组件都已经被挂载。

在 mounted 钩子中进行异步数据请求的优势是能够在数据请求完成后直接对数据进行操作，同时不会阻塞组件的渲染。这样可以避免一开始就渲染空数据或者 loading 状态。

示例：

export default {
  mounted() {
    // 发起异步数据请求
    fetchData()
      .then(data => {
        // 处理数据
        this.data = data;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
};

5）$attrs / $listeners

• $attrs：
  • $attrs 是一个对象，包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。
  • 在子组件中，可以通过 $attrs 获取传递给子组件但未被子组件 prop 所定义的特性。
• $listeners：
  • $listeners 是一个对象，包含了父作用域中绑定的所有事件监听器。
  • 在子组件中，可以通过 $listeners 获取父组件中绑定的所有事件监听器。

这两个属性通常用于在子组件中处理特性绑定和事件监听器，使得子组件能够更灵活地接收和处理从父组件传递的属性和事件。

示例：

<template>
  <div>
    <!-- 子组件处理特性绑定 -->
    <p v-bind="$attrs">Additional attributes from parent</p>
    
    <!-- 子组件处理事件监听器 -->
    <button v-on="$listeners">Click me</button>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

6）props / $emit

• props：
  • props 是用来从父组件向子组件传递数据的机制。
  • 父组件可以通过在子组件的标签上绑定属性来传递数据，子组件通过 props 属性接收并使用这些数据。
  • 通常在子组件中，props 用于接收数据，但不能修改数据。
• $emit：
  • $emit 是用来在子组件向父组件传递信息的机制。
  • 子组件可以通过 $emit 方法触发自定义事件，并传递数据给父组件。
  • 父组件可以在模板中使用 v-on 监听子组件的自定义事件，从而响应子组件的行为。

示例：

// 父组件
<template>
  <child-component :message="message" @custom-event="handleCustomEvent" />
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from parent"
    };
  },
  methods: {
    handleCustomEvent(data) {
      console.log("Received data from child:", data);
    }
  }
};
</script>

// 子组件
<template>
  <button @click="emitCustomEvent">Click me</button>
</template>

<script>
export default {
  props: ["message"],
  methods: {
    emitCustomEvent() {
      this.$emit("custom-event", "Data from child");
    }
  }
};
</script>

7）eventBus事件总线（$emit / $on）

EventBus 是一个用于在不同组件之间进行通信的简单的事件中心。它可以通过 $emit 发送事件，在其他组件中通过 $on 监听事件。

示例：

// 创建一个简单的 EventBus
const eventBus = new Vue();

// 在发送组件中
eventBus.$emit("custom-event", data);

// 在接收组件中
eventBus.$on("custom-event", (data) => {
  // 处理接收到的事件和数据
});

EventBus 允许不直接关联的组件进行通信，但需要小心使用，因为它可能会导致难以维护和追踪的事件流。在大型应用程序中，最好使用更专业的状态管理工具，如 Vuex。

8）依赖注入（provide / inject）

provide 和 inject 是一对用于在祖先组件和后代组件之间进行依赖注入的选项。

• provide：
  • 在祖先组件中，通过 provide 选项提供数据或方法。
  • 这些提供的数据或方法可以被后代组件通过 inject 选项接收并使用。
• inject：
  • 在后代组件中，通过 inject 选项接收祖先组件提供的数据或方法。
  • 后代组件可以直接使用这些注入的数据或方法，而不需要通过 props 或事件传递。

依赖注入在某些场景下可以简化组件之间的通信和数据共享，但也需要注意不要滥用它，以免导致组件之间的耦合度增加。

示例：

// 祖先组件
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
export default {
  provide: {
    message: "Hello from ancestor"
  }
};
</script>

// 后代组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ["message"]
};
</script>

9）ref / $refs

• ref：
  • ref 是用来在Vue组件中获取对DOM元素或子组件的引用的方式。
  • 在模板中可以通过 ref 特性给DOM元素或组件命名，然后在Vue实例中通过 this.$refs 来访问它们。
• $refs：
  • $refs 是一个对象，包含了所有在模板中使用 ref 特性命名的DOM元素或子组件的引用。
  • 可以通过 $refs 直接访问这些引用，进行操作或调用方法。

示例：

<template>
  <div>
    <input type="text" ref="inputRef" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
};
</script>

10 $parent / $children

• $parent：
  • $parent 是Vue实例的一个属性，用于访问父组件的实例。
  • 可以使用 $parent 访问父组件的数据和方法。
• $children：
  • $children 是Vue实例的一个属性，用于访问子组件的实例数组。
  • 可以使用 $children 访问所有子组件的数据和方法。

使用 $parent 和 $children 可以在父子组件之间进行通信，但需要注意的是，这种方式会导致组件之间的耦合度增加，不太推荐在大型应用中使用。最好的做法是通过 props 和 $emit 进行父子组件之间的通信，以保持组件的独立性和可维护性。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

?点赞?收藏?不迷路！?