学习vue3系列生命周期

简介: 学习vue3系列生命周期

vue3 增加了些生命周期,可以直接导入 onXXX 一族的函数来注册生命周期钩子:

与 2.x 版本生命周期相对应的组合式 API

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured


import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
    })
onUpdated(() => {
console.log('updated!')
     })
 onUnmounted(() => {
 console.log('unmounted!')
     })
   },
 }


这些生命周期钩子注册函数只能在 setup() 期间同步使用, 因为它们依赖于内部的全局状态来定位当前组件实例(正在调用 setup() 的组件实例), 不在当前组件下调用这些函数会抛出一个错误。

生命周期的用法和 vue2 无太大的区别,只是使用的时候记得把 API 导入进来。


依赖注入

Vue 组合式 API对依赖注入提供了 provide 和 inject 函数,功能类似 vue2 options API 的 provide/inject。provide 和 inject 函数都只能在当前活动组件实例的 setup() 中调用。

在上游组件提供 provide :


   setup () {
 provide('Theme', 'dark')
   }


在下游组件使用 :


<template>
<div> hello </div>
</template>
<script>
import { ref, inject } from 'vue'
export default {
  setup () {
const theme = inject('Theme', 'light' /* 默认值 */)
 console.log(theme, '依赖注入')
   }
 }
 </script>


工具函数

vue3 还有一些其它API,这个工具函数如下:

  • readonly 把对象变成只读的。
  • isRef 检查一个值是否为一个 ref 对象。
  • isProxy 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。
  • isReactive检查一个对象是否是由 reactive 创建的响应式代理。
  • isReadonly检查一个对象是否是由 readonly 创建的只读代理。
  • unref如果参数是一个 ref 则返回它的 value,否则返回参数本身


当我们在组件间提取并复用逻辑时,组合式 API 是十分灵活的。一个组合函数仅依赖它的参数和 Vue 全局导出的 API,而不是依赖其微妙的 this 上下文。你可以将组件内的任何一段逻辑导出为函数以复用它。你甚至可以通过导出整个 setup 函数达到和 extends 等价的效果。

相关文章
|
3天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
9 0
|
3天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
13 3
|
4天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
6天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
18 0
|
6天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
6天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
16 0
|
6天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
22 0
|
6天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
32 0
|
6天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
10 1
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0