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 的生命周期钩子函数主要包括以下几个：

beforeCreate：
- 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- 此时，组件的选项对象还未被创建，el 和 data 都不存在，this 指向实例本身。
created：
- 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- 通常在这一步进行数据的初始化，或者发起网络请求等操作。
beforeMount：
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
- 在这个阶段，虚拟 DOM 已经创建完成，但尚未挂载到真实的 DOM 节点上。
mounted：
- 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，并挂载到实例上去之后调用该钩子。
- 如果 root 实例挂载了一个在内服渲染的节点，当 mounted 被调用时 vm.$el 也在文档内。
- 这个阶段通常用于操作 DOM，或者发起网络请求后操作 DOM。
beforeUpdate：
- 数据更新时调用，发生在虚拟 DOM 打补丁之前。
- 你可以在这个钩子中访问现有的 DOM，但 DOM 尚未反映 Vue 在下一步预期的状态。
- 它允许你在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：
- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy：
- 实例销毁之前调用。在这一步，实例仍然完全可用。
- 通常在这一步进行解绑全局事件、销毁定时器、移除 DOM 元素等操作。
destroyed：
- Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也都会被销毁。