vue3 知识点详解

Vue3 比 Vue2 有什么优势？

• 性能更好
• 体积更小
• 更好的 ts 支持
• 更好的代码组织
• 更好的逻辑抽离（Composition API）
• 更多新功能

Vue3 升级了哪些重要的功能？

• createApp

    // Vue2.x
    const app = new Vue({ /* 选项 */ })
    
    // Vue3
    const app = Vue.createApp({ /* 选项 */ })
  

• 多事件处理

    <button @click="one($event), two($event)">Submit</button>
  

• Fragment（多个根节点模版）
• 移除 .sync
• 异步组件 defineAsyncComponent
• 移除 filter
• Teleport
• Suspense
• Composition API

Vue3 为何比 Vue2 快？

描述 Vue3 生命周期

• Options API 生命周期
  beforeCreate => created => beforeMount => moundted => beforeUpdate => updated => beforeDestroy => destroyed
• Composition API 生命周期
  beforeCreate => created => beforeMount => moundted => beforeUpdate => updated => beforeUnmount => unmounted
• keep-alive 生命周期
  activated, deactivated

如何看待 Composition API 和 Options API ？

• Composition API 带来了更好的代码组织、更好的逻辑复用、更好的类型推导
• 小型项目、业务逻辑简单，可以用 Options API
• 中大型项目、逻辑复杂，推荐用 Composition API

Composition API 如何实现代码逻辑复用？

如何理解 ref toRef 和 toRefs ？

ref

• 生成值类型的响应式数据
• 可用于模版和 reactive
• 通过 .value 修改值
• 可用于获取模版的 DOM 元素

Vue3 如何实现响应式？

• Object.defineProperty 的缺点：1、深度监听需要一次性递归，性能损耗大；2、无法监听新增属性/删除属性；3、无法原生监听数组，需要特殊处理。
• Proxy 实现响应式

    const reactive = (data) => {
    
    }
  

• proxy 深度监听只有访问相应属性才触发响应式。惰性的。

watch 和 watchEffect 的区别是什么？

setup 中如何获取组件实例？

Vite 是什么？

Composition API 和 React Hooks 的对比