面试-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')
}

Vue2和Vue3的主要区别

问：Vue2和Vue3的主要区别

答：
Vue2是选项式API，用Object.defineProperty()实现响应式
Vue3是组合式API + Setup函数，用Proxy代理实现响应式

Vue2路由的几种方式

问：Vue2路由的几种方式

声明式导航

<!-- 字符串路径 -->
<router-link to="/home">首页</router-link>

<!-- 命名路由 -->
<router-link :to="{ name: 'Home' }">首页</router-link>

<!-- 带参数 params -->
<router-link :to="{ name: 'Detail', params: { id: 1 } }">详情</router-link>

<!-- 带查询参数 query -->
<router-link :to="{ path: '/detail', query: { id: 1 } }">详情</router-link>

编程式导航

// 字符串
this.$router.push('/home')

// 对象 path
this.$router.push({ path: '/detail', query: { id: 1 } })

// 命名路由 name + params
this.$router.push({ name: 'Detail', params: { id: 1 } })

v-if和v-for优先级

问：v-if和v-for优先级

答：
Vue2中v-for优先级高于v-if
Vue3中v-if高于v-for

防抖和节流的区别

问：防抖和节流的区别

答：
防抖：停止操作后，延迟执行最后一次
节流：固定时间执行一次

前端怎么区分不同的环境

问：端怎么区分不同的环境

答：Vue 项目通过在根目录创建 .env.xxx的(.env.development .env.test .env.production)不同环境文件，配置以 VUE_APP_ 开头的变量，在 package.json 中通过 --mode 指定环境，实现开发、测试、生产环境的自动区分与配置切换。