面试-Vue

谈谈Vue生命周期

问：谈谈Vue生命周期

答：Vue的生命周期是指从Vue实例创建、挂载、更新、销毁到最终回收的完整过程中不同阶段所能调用的不同函数。

Vue创建自定义指令

问：Vue创建自定义指令

import Vue from 'vue'
import App from './App.vue'

Vue.directive('myDirective', {
  // 1. 只调用一次，指令第一次绑定	到元素时调用
  bind(el, binding, vnode, oldVnode) {
    // 初始化样式、事件监听等
  },

  // 2. 被绑定元素插入父节点时调用（保证父节点存在）
  inserted(el, binding, vnode, oldVnode) {
    // 操作 DOM 最常用
  },

  // 3. 所在组件更新时调用（可能多次触发）
  update(el, binding, vnode, oldVnode) {
    // 值变化时更新
  },

  // 4. 组件 VNode 及其子 VNode 全部更新后调用
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新完成后
  },

  // 5. 只调用一次，指令与元素解绑时调用
  unbind(el, binding, vnode, oldVnode) {
    // 清除定时器、移除事件监听
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue全局事件总线

问：Vue全局事件总线

答：全局事件总线就是一个空 Vue 实例，用来在任意组件间通信(父子、兄弟、跨级都可以)

// 1. 定义全局事件总线（main.js）
Vue.prototype.$bus = new Vue()

// 2. 发送事件（组件A）
this.$bus.$emit('sendMsg', 'hello')

// 3. 接收事件（组件B）
this.$bus.$on('sendMsg', (data) => {
  console.log(data)
})

// 4. 组件销毁时解绑（避免内存泄漏）
beforeDestroy() {
  this.$bus.$off('sendMsg')
}