vue面试题三

一、子组件如何向父组件传递事件或数据？

在Vue中，子组件向父组件传递事件或数据通常通过自定义事件（也称为事件监听）来实现。子组件可以通过this.$emit()方法触发一个事件，并将需要传递的数据作为参数。父组件在模板中监听这个事件，并在事件处理函数中接收传递过来的数据。

下面是一个简单的示例来说明如何在Vue中子组件向父组件传递事件或数据：

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="notifyParent">通知父组件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 使用$emit触发一个名为'child-event'的自定义事件，并传递一个参数
      this.$emit('child-event', '这是来自子组件的数据');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(dataFromChild) {
      // 在这里处理来自子组件的数据
      console.log('从子组件接收到的数据：', dataFromChild);
    }
  }
};
</script>

在上面的示例中，子组件ChildComponent中有一个按钮，当点击按钮时，会触发notifyParent方法。这个方法使用this.$emit('child-event', '这是来自子组件的数据')来触发一个名为child-event的自定义事件，并传递了一个字符串作为参数。

在父组件中，我们使用了v-on指令（或者简写为@）来监听子组件的child-event事件，并将handleChildEvent方法作为事件处理函数。当子组件触发child-event事件时，handleChildEvent方法会被调用，并接收到从子组件传递过来的数据。

这种机制允许子组件与父组件之间进行通信，并传递需要的数据或触发相应的操作。

二、请解释Vue的生命周期钩子函数有哪些？

Vue 的生命周期钩子函数是指在 Vue 实例从创建到销毁的过程中，Vue 自动调用的一系列函数。这些钩子函数允许你在 Vue 实例的不同阶段执行特定的代码，从而实现特定的功能或逻辑。Vue 的生命周期钩子函数主要包括以下几个：

1. beforeCreate：

   • 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
   • 此时，组件的选项对象还未被创建，el 和 data 都不存在，this 指向实例本身。

2. created：

   • 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
   • 通常在这一步进行数据的初始化，或者发起网络请求等操作。

3. beforeMount：

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。
   • 在这个阶段，虚拟 DOM 已经创建完成，但尚未挂载到真实的 DOM 节点上。

4. mounted：

   • 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，并挂载到实例上去之后调用该钩子。
   • 如果 root 实例挂载了一个在内服渲染的节点，当 mounted 被调用时 vm.$el 也在文档内。
   • 这个阶段通常用于操作 DOM，或者发起网络请求后操作 DOM。

5. beforeUpdate：

   • 数据更新时调用，发生在虚拟 DOM 打补丁之前。
   • 你可以在这个钩子中访问现有的 DOM，但 DOM 尚未反映 Vue 在下一步预期的状态。
   • 它允许你在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

6. updated：

   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   • 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

7. beforeDestroy：

   • 实例销毁之前调用。在这一步，实例仍然完全可用。
   • 通常在这一步进行解绑全局事件、销毁定时器、移除 DOM 元素等操作。

8. destroyed：

   • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也都会被销毁。

以上这些生命周期钩子函数，可以帮助我们更好地控制和管理 Vue 实例的状态和行为。在开发过程中，我们可以根据需要在不同的钩子函数中执行特定的代码，以实现我们想要的功能。