web前端面试高频考点——Vue3，2024最新物联网嵌入式开发框架体系架构面试题

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

---

---

2、Composition API 生命周期

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

<template>
  <p>生命周期 {{ msg }}</p>
</template>
  
<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default {
  name: "LiftCycles",
  props: {
    msg: String,
  },
  // 等于 beforeCreate 和 created
  setup() {
    console.log("setup");

    onBeforeMount(() => {
      console.log("onBeforeMounted");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
  },
};
</script>

---

---

---

三、如何理解 Composition API 和 Options API

Options API 对比 Composition API：

1、Composition API 带来了什么

• 更好的代码组织
• 更好的逻辑复用
• 更好的类型推导

2、Composition API 和 Options API 如何选择？

• 不建议共用，容易引起代码混乱
• Composition API 用于复杂的业务情况
• Options API 用于简单的业务情况

3、如何选择

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

4、别误解 Composition API

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

四、如何理解 ref、toRef 和 toRefs

1、ref

• 生成值类型的响应式数据
• 可以用于 reactive，也可以用于模板（不需要 .value）
• 用 .value 去修改值
• 所有的 ref 变量，尽量使用 xxxRef 的格式命名，便于区分

Ref.vue 组件

• ref 用来定义响应式的值类型
• reactive 用来定义响应式的引用类型
• ref 定义的值类型可在 reactive 和 模板中直接使用（不需要 .value）
• 修改值的时候要使用 .value

<template>
  <p>ref demo {{ ageRef }} {{ state.name }}</p>
</template>
  
<script>
import { ref, reactive } from "vue";
export default {
  name: "Ref",
  setup() {
    const ageRef = ref(21); // 值类型 响应式
    const nameRef = ref("杂货铺");

    const state = reactive({
      name: nameRef,
    });

    setTimeout(() => {
      console.log("ageRef", ageRef.value);

      ageRef.value = 18; // .value 修改值
      nameRef.value = "前端杂货铺";
    }, 1000);

    return {
      ageRef,
      state,
    };
  },
};
</script>

---

---

2、ref 扩展（获取模板的dom元素）

RefTemplate.vue 组件

• ref 本身的意思就是一个引用，给它传什么，它就是指向什么
• 传一个 DOM 当然就指向 DOM 了

<template>
  <p ref="elemRef">我是一行文字</p>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  name: "RefTemplate",
  setup() {
    const elemRef = ref(null);

    onMounted(() => {
        console.log('ref template', elemRef.value.innerHTML, elemRef.value);
    })

    return {
      elemRef,
    };
  },
};
</script>

---

3、toRef

• 针对一个响应式对象（reactive）的 prop（属性）
• 创建一个 ref，具有响应式
• 两者保持引用关系

toRef.vue 组件

• toRef(对象, "属性") 修改响应式对象的属性
• 改变 ageRef 时， state.age 也会改变
• 改变 state.age 时，ageRef 也会改变

<template>
  <p>toRef demo - {{ ageRef }} - {{ state.name }} - {{ state.age }}</p>
</template>

<script>
import { reactive, toRef } from "@vue/reactivity";

export default {
  name: "ToRef",
  setup() {
    const state = reactive({
      age: 20,
      name: "杂货铺",
    });

    // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
    // const state = {
    // age: 20,
    // name: '杂货铺'
    // }

	// 修改响应式对象（reactive）的一个属性（age）
    const ageRef = toRef(state, "age");

    setTimeout(() => {
      state.age = 25;
    }, 1000);

    setTimeout(() => {
      ageRef.value = 30; // 用 .value 修改值
    }, 2000);

    return {
      state,
      ageRef,
    };
  },
};
</script>

---

---

4、toRefs

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

toRefs 组件

• toRefs，将响应式对象变为普通对象（仍然具有响应式）
• 对象的每个属性都是对应的 ref

<template>
  <p>toRefs demo {{ ageRef }} {{ nameRef }}</p>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "ToRefs",
  setup() {
    const state = reactive({
      age: 20,
      name: "杂货铺",
    });

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

    // 每个属性，都是 ref 对象
    const { age: ageRef, name: nameRef } = stateAsRefs; 

    setTimeout(() => {
      state.age = 25
    }, 1000)

    return {
      ageRef,
      nameRef,
    };
  },
};
</script>

或者这么写（推荐）：

• 直接返回这个普通对象
• 注意此时模板内容也发生了变化，直接写对象里面的属性

<template>
  <p>toRefs demo {{ name }} {{ age }}</p>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "ToRefs",
  setup() {
    const state = reactive({
      age: 20,
      name: "杂货铺",
    });

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

	setTimeout(() => {
      state.age = 25
    }, 1000)
    
    return stateAsRefs
  },
};
</script>

五、ref、toRef 和 toRefs 的最佳使用方式

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

xxx.js 文件

• 定义函数和响应式对象
• 返回时转为 ref

import { toRefs, reactive } from "vue"

function useFeatureX() {
    const state = reactive({
      x: 1,
      y: 2
    })
  
    // 逻辑运行状态，省略 N 行
      
    // 返回时转换为 ref
    return toRefs(state)
}

export default useFeatureX

xxx.vue 组件

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取