Vue3面试题

Vue3比Vue2 有什么优势?

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

描述Vue3生命周期

• beforeDestroy 改为 beforeUnmount
• destroyed 改为unmouted
• 其他沿用Vue2的生命周期

import {
   
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

// 相当于beforeCreate 和 created
  setup() {
   
    console.log("setup");
    onBeforeMount(() => {
   
      console.log("onBeforeMount");
    });

    onMounted(() => {
   
      console.log("onMounted");
    });

    onBeforeUpdate(() => {
   
      console.log("onBeforeUpdate");
    });

    onUpdated(() => {
   
      console.log("onUpdated");
    });

    onBeforeUnmount(() => {
   
      console.log("onBeforeUnmount");
    });

    onUnmounted(() => {
   
      console.log("onUnmounted");
    });
  },

Options API生命周期

业务逻辑分散在各地
vue2在使用的方式

Composition API生命周期

setup()方式的生命周期

Composition API带来了什么?

• 更好的代码组织（业务逻辑集中）
• 更好的逻辑复用(有一道专门的面试题)
• 更好的类型推导

Composition API和Options API 如何选择?

如何看待 Composition API和 Options API ?

如何理解 ref toRef和 toRefs ?

是什么
最佳使用方式

ref

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

toRef

• 针对一个响应式对象(reactive 封装)的 prop
• 创建一个ref，真有响应式
• 两者保持引用关系

setup() {
   
      const state = reactive({
   
        age: 20,
        name: '小明'
      })
    // const state = { // 不具备响应式
    //   age: 20,
    //   name: "小明",
    // };

    // 普通对象实现响应式要加reactive()
    // 普通对象某一个属性要实现响应式要toRef

    // toRef如果用域普通对象（非响应式对象）产出的结果不具备响应式
    const ageRef = toRef(state, "age"); // 针对响应式数据

    setTimeout(() => {
   
      // age修改，ageRef也会修改
      state.age = 25;
    }, 1500);

    setTimeout(() => {
   
      ageRef.value = 30; // state.age也会修改
    }, 3000);

    return {
   
      state,
      ageRef,
    };

toRefs

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

setup() {
   
    const state = reactive({
   
      age: 20,
      name: "小明",
    });

    // 将响应对象变成普通对象
    const stateAsRefs = toRefs(state);

    // 每个属性都是ref对象
    // const { age: ageRef, name: nameRef } = stateAsRefs;  
    // return {
   
    //     ageRef,
    //     nameRef,
    // };
    
    // computed返回的数据是类似ref的对象，也可以.value
    const age1 = computed(() => {
   
      return state.age + 1;
    });

    return stateAsRefs; // html可以直接使用age和name
    // return { state }  // html使用state.age, state.name
    // return { ... state }  // html中的age和name不具备响应式
  },

toRefs的一个用处：合成函数返回响应式对象

最佳使用方式

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

为何需要ref

• 返回值类型，会丢失响应式
• 如在 setup、computed、合成函数，都有可能返回值类型
• Vue如不定义ref，用户将自造 ref，反而混乱

为何需要 .value

• ref是一个对象(不丢失响应式)，value 存储值
• 通过.value 属性的 get和 set 实现响应式
• 用于模板、reactive 时，不需要 value，其他情况都需要

// 错误
function computed(value) {
   
    const value = 0
    setTimeout(() => {
   
        value = getter()