vue3相关面试题

兔子公主
831 阅读4分钟

Vue3比Vue2有什么优势？

  1. 性能更好
  2. 体积更小
  3. 更好的ts支持
  4. 更好的代码组织
  5. 更好的逻辑抽离
  6. 更多新功能

描述Vue3生命周期

Options API生命周期

  1. beforeDestroy改为beforeUnmount
  2. destroyed改为unmounted
  3. 其他沿用Vue2的生命周期
Composition API生命周期

setup相当于是beforeCreate和Created，其他的和Options API一样的

如何看待Composition API和Options API?

Composition API带来了什么？

  1. 更好的代码组织
  2. 更好的逻辑复用（有一道专门的面试题）

Composition API和Options API如何选择？

  1. 不建议共用，会引起混乱
  2. 小型项目、业务逻辑简单，用Options API
  3. 中大型项目、逻辑复杂，用Composition API

别误解Composition API

  1. Composition API属于高阶技巧，不是基础必会
  2. Composition API是为解决复杂业务逻辑而设计
  3. Composition API就像Hooks在React中的地位

如何理解ref toRef 和 toRefs?

  1. 是什么
  2. 最佳使用方式
  3. 进阶，深入理解

ref

  1. 生成值类型的响应式数据
  2. 可用于模板和reactive
  3. 通过.value修改值

toRef

  1. 针对一个响应式对象（reactive封装）的prop
  2. 创建一个ref,具有响应式
  3. 两者保持引用关系
  4. toRef如果用于普通对象（非响应式对象），产出的结果不具备响应式

toRefs

  1. 将响应式对象(reactive封装)转换为普通对象
  2. 对象的每个prop都是对应的ref
  3. 两者保持引用关系

最佳使用方式

  1. 用reactive做对象的响应式，用ref做值类型响应式
  2. setup中返回toRefs(state)，或者toRef(state,'xxx')
  3. ref的变量命名都用xxxRef
  4. 合成函数返回响应式对象时，使用toRefs

进阶，深入了解

  1. 为何需要Ref？
    1. 返回值类型，会丢失响应式
    2. 如在setup、computed、合成函数，都有可能返回值类型
    3. Vue如不定义ref，用户将自造ref，反而混乱
  2. 为何需要.value?
    1. ref是一个对象（不丢失响应式），value存储值
    2. 通过.value属性的get和set实现响应式
    3. 用于模板、reactive时，不需要.value，其他情况都需要
function computed(getter){
    const ref = {
        value:null
    }
    setTimeout(()=>{
        ref.value = getter()
    },1500);
    return ref;
}
let a = {};
a = computed(()=>100);

image.png

  1. 为何需要toRef toRefs?
    1. 初衷：不丢失响应式的情况下，把对象数据分解/扩散
    2. 前提：针对的是响应式对象（reactive封装的）非普通对象
    3. 注意：不创造响应式，而是延续响应式

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

参考：v3.cn.vuejs.org/guide/migra…

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

  1. 抽离逻辑代码到一个函数
  2. 函数命名约定为 useXxxx格式（React Hooks也是）
  3. 在setup中引用useXxxx函数

Vue3如何实现响应式？

回顾Vue2.x的Object.defineProperty

  1. 深度监听需要一次性递归
  2. 无法监听新增属性/删除属性，需要Vue.set和Vue.delete解决
  3. 无法原生监听数组，需要特殊处理

Vue3 如何用Proxy实现响应式

  1. 深度监听，性能更好
  2. 可监听，新增/删除属性
  3. 可监听数组变化

Reflect作用

  1. 和Proxy能力一一对应
  2. 规范化、标准化、函数式
  3. 替换掉Object上的工具函数
  4. Proxy能规避Object.defineProperty的问题
  5. Proxy无法兼容所有浏览器，无法polyfill

v-model参数的用法

v3.cn.vuejs.org/guide/migra…

watch和watchEffect的区别是什么？

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

setup中如何获取组件实例？

  1. 在setup和其他Composition API中没有this
  2. 可通过getCurrentInstance获取当前实例
  3. 若使用Options API可照常使用this

Vue3如何比Vue2快？

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

Vite是什么？

  1. 一个前端打包工具，Vue作者发起的项目
  2. 借助Vue的影响力，发展较快，和webpack竞争
  3. 优势：开发环境使用ES6 Module，无需打包(webpack需要将es6编译为es5) ---- 非常快
  4. 生产环境使用rollup，并不会快很多

Composition API和React Hooks的对比

  1. 前者setup只会被调用一次，而后者函数会被多次调用
  2. 前者无需useMemo useCallback，因为setup只调用一次
  3. 前者无需顾虑调用顺序，而后者需要保证hooks的顺序一致
  4. 前者reactive + ref比后者useState，要难理解
avatar
文章
阅读
粉丝