web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)

简介: web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)

一、Vue3 比 Vue2 有什么优势?

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

二、Vue2 和 Vue3 生命周期区别

App.vue 父组件:

<template>
  <div>
    <life-cycles :msg="msg" v-if="flag" />
    <button @click="changeHandler">change msg</button>
    <button @click="changeFlagHandler">change flag</button>
  </div>
</template>
<script>
import LifeCycles from "./components/LifeCycles.vue";
export default {
  data() {
    return {
      msg: "hello vue3",
      flag: true,
    };
  },
  methods: {
    changeHandler() {
      this.msg = "hello vue3" + Date.now();
    },
    changeFlagHandler() {
      this.flag = !this.flag;
    },
  },
  components: { LifeCycles },
};
</script>

1、Options API 生命周期

LiftCycles.vue 子组件:

  • Vue2.x 的形式
  • 点击按钮进行 组件更新 和 组件销毁(查看控制台输出内容)
<template>
  <p>生命周期 {{ msg }}</p>
</template>
<script>
export default {
  name: "LiftCycles",
  props: {
    msg: String,
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  },
};
</script>

0263cf6cc47b48ce9c3bdbda5b0d7e1b.pngeba7fabd02524be09c5e60fda123d55c.png2a06b0ff4a4a42818ecdd1faac1cdef2.png

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>

ea508b6b80fa4043a97e6d417aa4c1d2.png1a53bdd942774f5ab19cca25907382f3.png56aad59cf67f42d1a4aea3b4a52fe070.png

三、如何理解 Composition API 和 Options API

Options API 对比 Composition API:


4cd576a35453411ab03607b3b1f0dcd9.gif

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 用来定义响应式的值类型
  • 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>

d5aad24e7e8c4c69a4268b0f64503521.png31f9df83de834921b63ec0e226664d42.png

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>

58d7079b230d4a1b97a04a2a1b2c2f4f.png

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>

38542902527f4b4a8de334a4ad242702.png365b86454f5c4cf0bc2090bba47c0c35.png3f488a6973344955860a22e02ee398ef.png

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>

57d1438db4ba4d029f9f48b10371d9a0.png

或者这么写(推荐):

  • 直接返回这个普通对象
  • 注意此时模板内容也发生了变化,直接写对象里面的属性
<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>

57cdd44fb9c54a1ea1590dc59b4c98ae.png57d1438db4ba4d029f9f48b10371d9a0.png

五、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 组件

  • 使用时直接写对象的属性就可以
export default {
  setup() {
    // 可以在不是去响应式的情况下破坏结构
    const { x, y } = useFeatureX()
    return {
      x,
      y
    }
  } 
}

不积跬步无以至千里 不积小流无以成江海


相关文章
|
17天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
17天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
22天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
29天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
82 4
|
17天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
24天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
30天前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
101 0
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
60 0
|
6月前
|
JavaScript 前端开发 开发者
vue实例、指令、生命周期
vue实例、指令、生命周期
58 1
|
6月前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期

热门文章

最新文章