Wang's blog Wang's blog
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Wang Mings

跟随大神,成为大神!
首页
  • 前端文章

    • HTML教程
    • CSS
    • JavaScript
  • 前端框架

    • Vue
    • React
    • VuePress
    • Electron
  • 后端技术

    • Npm
    • Node
    • TypeScript
  • 编程规范

    • 规范
  • 我的笔记
  • Git
  • GitHub
  • VSCode
  • Mac工具
  • 数据库
  • Google
  • 服务器
  • Python爬虫
  • 前端教程
更多
收藏
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • CSS

  • Npm

  • Vue

    • Vue简介
    • 路由守卫
    • tsvue的写法
    • Vue常用技巧
    • vue的JSX写法
    • vue防抖组件
    • 动态热更新设置
    • keepActive缓存路由
    • 自动生成面包屑VUE组件
    • vue生命周期对比生命周期
      • 总结
    • eslint编译时警告或错误配置
    • Vue中封装axios的取消请求事情
    • vue+element递归生成无限菜单组件
    • Vue框架dist目录下各个文件的区别
    • 超详细Vue的种和Vue的种组件间通信方式
    • Vue项目中出现Loadingchunk{n}failed问题的解决方法
    • Vuex

    • 其他

    • 基础

    • 工具

    • 组件

    • 规模化

    • 过渡&动画

    • 可复用性&组合

  • HTML

  • Node

  • Yaml

  • React

  • 框架

  • 规范

  • Electron

  • JS演示

  • VuePress

  • JavaScript

  • TypeScript

  • 微信小程序

  • TypeScript-axios

  • 前端
  • Vue
wangmings
2022-07-19
目录

vue生命周期对比生命周期

# vue 2.0 生命周期对比 3.0 生命周期

2.0 周期名称 3.0 周期名称 说明
beforeCreate setup 组件创建之前
created setup 组件创建完成
beforeMount onBeforeMount 组件挂载之前
mounted onMounted 组件挂载完成
beforeUpdate onBeforeUpdate 数据更新,虚拟 DOM 打补丁之前
updated onUpdated 数据更新,虚拟 DOM 渲染完成
beforeDestroy onBeforeUnmount 组件销毁之前
destroyed onUnmounted 组件销毁后
errorCaptured onErrorCaptured 在捕获一个来自后代组件的错误时被调用

通过上表对比,我们可以看到,原有的生命周期,基本都是存在的。并且新的命名,更加直观,通过 on 前缀,可以直观的看到,这是一个生命周期函数。

生命周期是如何使用的呢?上代码!

<template>
    <main>生命周期</main>
</template>
<script>
// 你需要使用到什么生命周期,就引出来什么生命周期
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  // setup 函数,就相当于 vue 2.0 中的 created
  setup () {
    const count = ref(0)
    // 其他的生命周期都写在这里
    onBeforeMount (() => {
      count.value++
      console.log('onBeforeMount', count.value)
    })
    onMounted (() => {
      count.value++
      console.log('onMounted', count.value)
    })
    // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值,会死循环的哦!
    onBeforeUpdate (() => {
      console.log('onBeforeUpdate', count.value)
    })
    onUpdated (() => {
      console.log('onUpdated', count.value)
    })
    onBeforeUnmount (() => {
      count.value++
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      count.value++
      console.log('onUnmounted', count.value)
    })
    // 定义一个函数,修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    return {
      count,
      countAdd
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# 总结

首先,在vue 3.0中,生命周期是从 vue 中导出的,我们需要用到哪些,就导出哪些。

可能不少人会认为多次一举,但实则不然。vue 提供这么多的生命周期,有几个是我们常用的?在大多数的组件中,我们用不到生命周期。即便是页面级别的应用,可能用到最多的是 onMounted 即可。

当然,那些绑定时间的操作会用到解绑,因此会用到 onUnmounted。其它的生命周期,正常情况下是基本用不到的。所以,通过引入使用的这种设定,可以减少我们的最终编译的项目的体积。而且,这样的引入使用,更加的逻辑清晰。

其次,除 setup 之外,其他的生命周期函数,都是在 setup 里面直接书写函数即可。

编辑 (opens new window)
自动生成面包屑VUE组件
eslint编译时警告或错误配置

← 自动生成面包屑VUE组件 eslint编译时警告或错误配置→

最近更新
01
theme-vdoing-blog博客静态编译问题
09-16
02
搜索引擎
07-19
03
友情链接
07-19
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式