高频率Vue面试题及答案有哪些

Vue实例的生命周期钩子函数

Vue实例有一套完整的生命周期，从创建、初始化数据、编译模板、挂载DOM、渲染、更新、销毁等一系列过程。在这个过程中，会触发一些钩子函数，用于开发者自己的逻辑处理。

//示例代码
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    console.log('Vue实例创建之前')
  },
  created() {
    console.log('Vue实例已创建完成')
  },
  beforeMount() {
    console.log('Vue模板未挂载到DOM上')
  },
  mounted() {
    console.log('Vue实例已经挂载到DOM上')
  },
  beforeUpdate() {
    console.log('Vue数据即将更新')
  },
  updated() {
    console.log('Vue数据已经更新完毕')
  },
  beforeDestroy() {
    console.log('Vue实例即将销毁')
  },
  destroyed() {
    console.log('Vue实例已经销毁')
  }
})

父子组件通信

在Vue中，父子组件是常见的组件间通信方式。父子组件之间可以通过Props传递数据，也可以通过$emit触发事件。

//该示例是父组件向子组件传递数据，子组件通过props获取
//父组件

   //向子组件传递父组件的数据


//子组件

//该示例是子组件向父组件传递数据，子组件通过$emit触发事件
//子组件