1. Vue3 比 vue2 有什么优势

  2. 描述vue3生命周期

  3. 如何看待composition API 和 Options API

  4. 如何理解 ref toRef toRefs

  5. Vue3 升级哪些重要功能

    1. createApp

      1. use 等原来需要用Vue来调用,现在使用app实例

    2. emits 属性

    3. 生命周期

    4. 多事件

      1. 可以给事件绑定多个会掉,用逗号隔开

    5. fragment

      1. template 不再 需要包裹单一父节点

    6. 移除.sync

    7. 移除异步组件的写法

      1. Vue2 直接通过函数返回import(‘’componentPath.vue)
      2. Vue3 需要使用defineAsyncComponent 来包裹vue2 的写法

    8. 基础filter

    9. Teleport

    10. Suspense

    11. Composition API

      1. reactive ref相关函数 readonly watch watchEffect setup 生命周期钩子

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

  7. Vue3 如何实现响应式

  8. watch watchEffect 区别是什么

    1. watch 需要指定要监听的数据
      1. 默认初始化不会执行
    2. watchEffect 会自动去收集监听用到的值
      1. 默认初始化时会执行

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

  10. Vue3 为什么比vue2 快

    1. proxy响应式
      1. 不必递归到底,用到才回去生成响应式
    2. patchFlag
      1. 模版编译时,动态节点做标记
      2. 标记,分为不同的类型,如 TEXT PROPS
      3. diff 算法时, 可以区分静态节点,以及不同类型的动态节点
    3. hoistStatic
      1. 将静态节点的定义,提升到父作用域,缓存起来
      2. 多个相邻的静态节点,会被合并起来
      3. 典型的拿空间换时间的优化策略
    4. cacheHandler
      1. 缓存事件处理函数
    5. SSR 优化
      1. 静态节点直接输出,绕过了vdom
    6. tree-shaking
      1. 编译时,会根据不同的情况,引入不同API, 需要什么就引入什么

  11. vite 是什么

    1. 一个前端打包工具, vue 作者发起的项目
    2. 优势: 开发环境无需打包,启动快
      1. 开发环境使用 ES Module (ES6 支持原生的模块化),无需打包 – 所以非常快
      2. 生产环境用 rollup ,并不会快很多

  12. composition API 和 React Hooks 的区别

    1. composition API
      1. setup 只会被调用一次(算beforeCreate、created合成的效果)
      2. 无需 useMemo uesCallback 来优化 setup只会执行一次
      3. 无需考虑调用顺序
      4. reactive+ref 比较难以理解
    2. React Hooks
      1. Hooks 默认会多次调用,需要手动指定依赖项
      2. 需要手动将变量,函数用 useMemo uesCallback 包裹来优化
      3. 需要报错hooks的顺序一致
      4. useState 很容易理解

  13. 为什么需要ref

    1. 返回值类型,会丢失响应式
    2. 如在setup computed 合成函数中,都有肯返回值类型
    3. vue 如果不定义ref,用户将自己造一个,反而混乱

  14. 为什么需要xxxRef.value

    1. ref是一个对象(对象可以保持响应式-因为是引用拷贝) , value存储值

    2. 通过.value属性的get和set实现响应式

      注意: 用于模版、reactive时,不需要.value vue框架会自动取帮你取 ; 只有自己在操作时才需要

  15. 为什么要toRef toRefs

    1. 初衷: 不丢失响应式的前提下,将变量进行分解/扩散
    2. 注意: 不是在创造响应式,而是在延续响应式