vue常见考题

vue组件通讯方式（全面）

• props 和 $emit
• 自定义事件（event.$on()/event.emit()）。 注意： vue2：new Vue() 就是 event。 vue3 引入第三方的自定义事件 event-emitter
• $attr
• $parent
• $refs
• provide/inject
• Vuex

自定义事件（Vue）

可以先引入一个地方法 event-mitter，抽出一个公共文件使用

// event.js
import ee from 'event-emitter'
const event = ee()

export default event

组件中监听发布使用自定事件

// vue组件监听自定事件使用
<script>
import event from 'event.js'
export default {
    mounted() {
        event.on('showMsg', this.showMsg)
    }
    methods: {
        showMsg(text) {
            console.log(text)
        }
    }
    // vue2.x beforeDestroy
    beforeUnmount() {
        // 组件销毁是取消 监听
        event.off('showMsg', this.showMsg)
    }
}
</script>

// 自定事件发布使用示例
<template>
    <button @click="trigger">自定义事件触发</button>
</template>
<script>
import event from 'event.js'
export default {
    
    methods: {
        trigger() {
            event.emit('showMsg', 'hello')
        }
    }
}
</script>

Vuex mutation action 区别

• mutation：原子操作，必须是同步代码
• action：可以包含多个 mutation,可以写异步代码

vue 性能优化

• 自定义事件、DOM 事件及时销毁
• 合理使用异步组件
• 合理使用 keep-alive
• data 层级不要太深
• 使用 vue-loader 在开发环境做模板编译（预编译）

双向数据绑定 v-model 的实现原理

• input 元素的 value = this.name
• 绑定input事件 this.name = $event.target.value
• data 更新触发 re-render

$nextTick 与 update 区别

• update 先执行，数据更新后就会先调用钩子生命周期。$nextTick是在下一次 DOM 更新循环后之后执行。顺序执行微任务 update 执行完后会立即执行 $nextTick

Vue3 为何比 Vue2 快

• Proxy 响应
• PatchFlag
  • 编译模板时，动态节点做标记
  • 标记，分为不同的类型，如 TEXT PROPS
  • diff 算法时，可以区分静态节点，以及不同类型的动态节点
• hoistStatic
  • 将静态节点的定义，提升到父作用域，缓存起来
  • 多个相邻的静态节点，会被合并起来
  • 典型的拿空间换时间的优化策略
• cachHandler
  • 缓存事件
• SSR 优化
  • 静态节点直接输出，绕过了 vdom
  • 动态节点还是需要动态渲染
• three-shaking
  • 编译时，根据不同的情况，引入不同的API

vue3 新功能

• createApp
• emits 属性
• 多事件处理
• Fragment
• 移除 .sync 改为 v-model 参数
• 异步组件的引用方式
• 移除 filter
• Teleport
• Suspense
• Composition API
  • reactive
  • ref toRef toRefs
  • readonly
  • computed
  • watch watchEffect
  • 钩子生命周期

Vue 和 React 函数组件的区别

• vue 函数组件没有实例和生命周期，比较简单
• Vue Composition API 不能用于 Vue 函数组件
• React 函数组件 + Hooks 可以实现完备的功能

函数式组件的签名与 setup() 钩子相同：

function MyComponent(props, { slots, emit, attrs }) {
  // ...
}

对比 Vue3 Composition API 和 React Hooks

• vue Composition API：依赖组件实例的,组件只会执行一次
• React Hooks 没有组件实例，纯函数（它底层是通过列表封装的，不能通过 if、for等语法去使用，必须放到顶层使用），每次数据更新组件都会重新执行。