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);