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
    }
  } 
}

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


相关文章
|
22天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
36 4
|
24天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
86 3
|
2天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
7 1
|
8天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
20 2
|
8天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
12天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
25 3
|
12天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
25 2
|
16天前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
18天前
|
监控 负载均衡 API
Web、RESTful API 在微服务中有哪些作用?
在微服务架构中,Web 和 RESTful API 扮演着至关重要的角色。它们帮助实现服务之间的通信、数据交换和系统的可扩展性。
41 2
|
19天前
|
JavaScript