Vue3

谷种百合花
152 阅读4分钟

1.Vue3比Vue2有什么优势？

  • 性能更好
  • 体积更小
  • 更好的支持TS
  • 更好的代码组织
  • 更好的逻辑抽离
  • 更多新功能

2.描述Vue3生命周期

  • Options API
  1. beforeDestroy 改为 beforeUnmount
  2. destroyed 改为 unmounted
  • Compositon API
  • setup整合了beforeCreate和created
  1. onBeforeMount
  2. onMounted
  3. onBeforeUpdate
  4. onUpdated
  5. onBeforeUnmounte
  6. onUnmounted

3.如何看待Composition API和 Options API?

  • Compositon API
  1. 更好的代码组织：逻辑相关代码在一起
  2. 更好的逻辑复用：逻辑复用，抽离
  3. 更好的类型推导
  • 不建议共用， 会引起混乱
  • 小型项目，逻辑简单，使用 Options API
  • 中大型项目，逻辑复杂，使用 Composition API

4.如何理解ref、toRef 和 toRefs？

  • 用reactive做对象的响应式， 用ref做值类型的响应式
  • setup中返回toRefs(state), 或 toRef(state,'xxx')
  • ref的变量命名都用xxxRef
  • 合成函数返回响应式对象时，使用toRefs
    1. 为什么需要ref?
    • 返回值类型，会丢失响应式
    • 在setup, computed，合成函数都有可能返回值类型
    1. 为什么需要.value
    • ref是一个对象（不丢失响应式），value存储值
    • 通过.value属性的get和set实现响应式
    • 用于模板、reactive时，不需要.value，其他情况都需要
    1. 为什么需要toRef和 toRefs
    • 初衷：在不丢失响应式的情况下，对对象进行解构和扩散（直接使用属性名字，不用state.xx）
    • 前提：针对的是响应式对象（reactive封装的）非普通的对象
    • 注意：不创造响应式，而是延续响应式

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

  • createAPP: new Vue() -> Vue.createApp().use
  • emits属性
  • 生命周期
  • 多事件: onclick里面调用多个事件
  • 移除.sync
  • Fragment： template中可以有多个节点
  • 异步组件写法： 引入defineAsyncComponent
  • 移除filter
  • Teleport: 把一些组件放在body
    <Teleport to='body'>
  • Suspense: 实现异步loading,两个slot
  • Composition API:
    1. reactive
    2. ref相关
    3. readonly
    4. watch和watchEffect
    5. setup
    6. 生命周期钩子函数

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

  • 抽离逻辑代码到一个函数
  • 函数命名约定为 useXXX格式（与React Hooks也是）
  • 在setup中用useXXX函数
  • 案例：获取鼠标定位 useMousePosition

7.Vue3如何实现响应式？

  • 回顾 Object.defineProperty
    1. 缺点：深度监听，一次性监听完成
    2. 缺点：没有新增，删除属性，Vue.set Vue.delete
    3. 缺点：无法原生监听数组
  • Proxy--Reflect
  • Reflect的作用
    1. 和Proxy能力一一对应
    2. 规范化、标准化、函数式
    3. 替代Object上的工具函数
  • Proxy
    1. 深度监听、性能更好
    2. 可监听 新增、删除的属性
    3. 可监听数组的变化
    4. Proxy能规避 Object.defineProperty的问题
    5. Proxy无法兼容所有浏览器，无法polyfill

8.watch 和 watchEffect的区别是什么？

  • 两者都可以监听data属性变化
  • watch需要明确监听哪个属性
  • watchEffect会根据其中的属性，自动监听其变化

9.setup中如何获取组件的实例？this

  • 在setup和其他的Composition API中没有this
  • 可以通过getCurrentInstance获取当前实例
  • 若使用Options API可照常使用this

10.Vue3为何比Vue2快？

  • Proxy响应式
  • PathFlag 静态标记
    1. 编译模板时，给动态节点做标记
    2. 标记，分为不同的类型：如text,props
    3. diff算法时，可以区分静态节点，以及不同类型的动态节点 image.png
  • hoistStatic
    1. 将静态节点的定义，提升到父级作用域，缓存起来
    2. 多个相邻的静态节点，会被合并起来
    3. 典型的拿空间换时间的优化策略
  • catchHandler 缓存事件
  • SSR优化
    1. 静态节点的输出，绕过vdom
    2. 动态节点，还是需要动态渲染
  • tree-shaking
    1. 编译时，根据不同情况，引入不同的API

11.Vite是什么？

  • vite是前端打包工具,web构建工具
  • 借助vue3发展比较快，和webpack发起PK
  • 优势：开发环境下，无需打包，启动非常快
    1. 开发环境使用ES6 Module, 不需打包， 启动非常快
        <script type='module'></script>
    1. 生成环境使用rollop,并不会快很多

12.Composition API 和 React Hooks的对比

  • 前者setup只会被调用一次，后者函数会被多次调用
  • 前者不需使用useMemo|useCallback. 因为setup只会调用一次
  • 前者不需考虑调用顺序，后者需要保证hooks的顺序一致
  • 前者reactive+ref 相当于后者 useState
avatar
文章
阅读
粉丝