Vue3的组合式API介绍,和Vue2生命周期函数的变化

目录

  • 1,setup
  • 2,生命周期函数
    • [1,为什么删除了 beforeCreate 和 created?](#1,为什么删除了 beforeCreate 和 created?)
    • 2,新增钩子函数
  • [3,compositionAPI 相比于 optionAPI 有哪些优势?](#3,compositionAPI 相比于 optionAPI 有哪些优势?)

Vue3 中新增了 composition API(组合式API),包括

setup() 和生命周期函数都是和组件深度绑定的,不能脱离组件单独存在。

1,setup

官网参考

  1. setup() 是在组件中使用组合式API的入口。该函数在组件属性 props 被赋值后立即执行,早于所有生命周期函数
html 复制代码
<script>
export default {
  setup(props, context){
    // props 是一个对象,包含了所有的组件属性值
    // context 是一个对象,提供了组件所需的上下文信息
  }
}
</script>

context对象的成员

成员 类型 说明
attrs 对象 vue2this.$attrs
slots 对象 vue2this.$slots
emit 方法 vue2this.$emit
expose 方法 新。暴露公共属性

另外,在 setup() 函数中返回的对象会暴露给模板和组件实例。如果使用的 <script setup> 语法糖,那就会默认返回所有顶层绑定。

  1. 也可以通过它将组合式API集成到选项式API中。
html 复制代码
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
  mounted() {
    console.log(this.count) // 0
  }
}
</script>

2,生命周期函数

vue2 option api vue3 option api vue 3 composition api
beforeCreate beforeCreate 不再需要,代码可放到setup中
created created 不再需要,代码可放到setup中
beforeMount beforeMount onBeforeMount
mounted mounted onMounted
beforeUpdate beforeUpdate onBeforeUpdate
updated updated onUpdated
beforeDestroy 改 beforeUnmount onBeforeUnmount
destroyed 改unmounted onUnmounted
errorCaptured errorCaptured onErrorCaptured
- 新renderTracked onRenderTracked
- 新renderTriggered onRenderTriggered

1,为什么删除了 beforeCreate 和 created?

因为这2个是用于在 optionAPI 中完成数据响应式的。而 vue3 的响应式API是独立的,所以不需要。

2,新增钩子函数

钩子函数 参数 执行时机
renderTracked DebuggerEvent 渲染 vdom 收集到的每一次依赖时
renderTriggered DebuggerEvent 某个依赖变化导致组件重新渲染时

参数DebuggerEvent:

  • target: 跟踪或触发渲染的对象
  • key: 跟踪或触发渲染的属性
  • type: 跟踪或触发渲染的方式

举例:

html 复制代码
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
</template>

<script>
export default {
  props: {
    msg: Boolean,
  },
  data() {
    return {
      count: 0,
    };
  },
  renderTracked(e) {
    console.log("renderTracked", e);
  },
  renderTriggered(e) {
    console.log("renderTriggered", e);
  },
};
</script>

首先,renderTracked() 会执行2次,因为收集了2个依赖 msgcount

当点击修改 count 时,renderTriggered() 会执行一次,因为依赖 count 发生了变化。

3,compositionAPI 相比于 optionAPI 有哪些优势?

  1. 为了更好的逻辑复用和代码组织。
  2. 更好的类型推导。

compositionAPI 配合独立的响应式API,可以在组件内部进行更加细粒度的控制,使得组件中不同的功能高度聚合,提升了代码的可维护性。

对于不同组件的相同功能,也能够更好的复用。

相比于optionAPI,compositionAPI 中没有了指向奇怪的 this,所有的 api 变得更加函数式,这有利于和类型推断,比如和 TS 深度配合。


以上。

相关推荐
摸鱼的春哥2 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel8 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js