vue3的生命周期钩子
vue3的生命周期钩子与vue2的差不多，只是命名和调用上有一些诧异，详见下文
与 2.x 版本生命周期相对应的 Composition API
| Vue 2.x | Vue 3.x |
|---|---|
| 改用 setup() | |
| 改用 setup() | |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
新增的钩子函数
除了和 2.x 生命周期等效项之外，Composition API 还提供了以下调试钩子函数：
- onRenderTracked
- onRenderTriggered
祝君无Bug~
All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.
Related Articles
2021-05-27
【个人开源】Vue3 轮播组件: v3-carousel
引水方知开源不易 与朋友首次开源了一个轮播插件，希望大家积极品尝 介绍基于 vue3 composition api 编写的轮播插件，多种属性适配，轮播内容 可完全自定义，基本可以满足大部分的轮播需求。 基本功能介绍： 是否开启自动轮播，自定义轮播时间 鼠标移入后暂停轮播，鼠标移出后重置轮播 点击 左侧/右侧 切换按钮，手动切换 点击 底部轮播指示器，手动切换 切换按钮 与 轮播指示器，可设置 hover 展示 左侧切换向左滚动，右侧切换向右滚动 … 在线Demo：正在制作… 安装1npm install v3-carousel or 1yarn add v3-carousel 使用main.js 123456import { createApp } from "vue";import App from "./App.vue";import Carousel from "v3-carousel"; // 引入const app =...
2021-07-05
Vue源码解读（知识点总结）
为了方便自己对知识点的巩固和理解，整理了李永宁大佬 12 篇《Vue源码解读》的文末知识点总结，在这里可以一览天下。如果想看详细文章，可点击标题下方的“阅读原文”即可。 （1）前言阅读原文 （2）Vue 初始化过程阅读原文 Vue 的初始化过程（new Vue(options)）都做了什么？ 处理组件配置项 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率 初始化组件实例的关系属性，比如 $parent、$children、$root、$refs 等 处理自定义事件 调用 beforeCreate 钩子函数 初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上 数据响应式，处理 props、methods、data、computed、watch 等选项 解析组件配置项上的 provide 对象，将其挂载到...
2021-02-06
viewerjs查看大图组件
因为项目没有使用element-ui，所以不能使用自带的el-image组件进行大图查看，遂找了一个单独的组件 安装1npm install viewerjs 使用案例12345678910111213<!-- 单个图片查看 --><div> <img id="image" src="picture.jpg" alt="Picture"></div><!-- 多个图片查看 --><div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> ...
2020-11-07
中央事件总线插件vue-bus-ts
项目中难免会遇到非父子组件之间的传参与通信问题，遂整理此文。 简介vue-bus-ts 是一款支持在ts环境下使用的全局事件总线插件。 安装及使用方法安装1npm i -S vue-bus-ts 注册安装后需要在main.ts中引入并注册，挂载到全局的Vue实例上即可 123456789101112# main.tsimport Vue from 'vue';import EventBus from 'vue-bus-ts';Vue.use(EventBus);var bus = new EventBus.Bus();new Vue({ bus, render: (h) => h(App),}).$mount('#app'); 注册事件在调用事件前，需要实现注册该事件，否则不会生效 一般写在vue文件的mounted或者created生命周期中 123456# *.vue var eventId = this.$bus.$on('event_name',...
2021-01-26
修改element-ui的全局配置
项目因使用qiankun嵌入了子项目，且都使用了element-ui的弹窗样式，遂导致子应用中插入到父应用body的弹窗因层级过低无法展示 配置信息因element-ui的弹窗默的z-index层级默认是从2000开始的，并且打开多个弹窗时z-index会逐步递增，所以若主子应用不做区分的话，很可能会导致有的弹窗被遮挡 好在element提供了入口可将全局的弹窗层级设置一个起始值，即只需将子应用的层级初始值调高即可 1234567// 在main.ts中import Vue from 'vue';import Element from 'element-ui';Vue.use(Element, { size: 'small', // 组件的默认尺寸 mini、small、medium zIndex: 3000 // 弹窗默认层级初始值，默认2000}); 祝君无Bug~
2021-03-08
加载聊天历史记录并保留滚动条当前位置
在聊天框中，加载历史消息肯定是往消息的上面去加载，即对应数组的Array.unshift()操作，此时默认滚动条会回到顶部，所以我们需要重置滚动条的位置 Vue中代码实现首先记录加载历史前，滚动条的位置scrollHeight 1const scrollHeight: number = (document as any).getElementById('messageBox').scrollHeight; 加载历史消息 1234for (let i = 0; i < outMsg.list.length; i++) { // todo sth, ex: 消息处理 activeList.unshift(list[i]);} 滚动到原来的位置 注：因为我是在vue环境下，需要确保页面已经渲染完，再滚动到加载前的位置，所以使用Vue.nextTick() 1234nextTick(() => { const scrollDom: any = (document as...
