关于vue3生命周期的使用、了解以及用途(详细版)

这篇具有很好参考价值的文章主要介绍了关于vue3生命周期的使用、了解以及用途(详细版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

每一个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处

vue3 created,vue3,vue.js,javascript,前端


组合式写法没有 beforeCreate / created 生命周期,并且组合式写生命周期用哪个先引哪个

  • beforeCreate

  1. beforeCreate选项式声明周期函数

  2. .在组件实例初始化之前调用(props解析已解析、data和computed等选项还未处理)

  3. 不能访问组件的实例this及其组件中的数据源和函数等

  4. 不能访问组件中的视图DOM元素

  5. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

选项式写法:

    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
 beforeCreate() {
        console.log('----------------------------')
        console.log('beforeCreate 组件实例话之前')
        console.log(this.$props.subtitle)
        console.log('不能访问组件的实例 this 中的数据源和函数等');
        console.log('不能访问组件中的视图DOM元素');
        // console.log(this.age)
        // this.showMessage()
        // console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

 没有 beforeCreate 生命周期
  • created

  1. created选项式生命周期函数

  2. 在组件实例化成功后调用

  3. 可访问组件的实例this及其组件中的数据源和函数等

  4. 不能访问组件中的视图DOM元素

选项式写法:

	// 组件视图渲染之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

组合式写法:

没有 created 生命周期
  • beforeMount/onBeforeMount

  1. beforeMount:选项式生命周期函数、onBeforeMount:组合式生命周期钩子
  2. 组件视图在浏览器渲染之前调用
  3. 可访问组件实例东西(数据源、函数、计算属性等)
  4. 不能访问组件视图中的DOM元素

选项式写法:
beforeMount

 	 // 组件视图渲染之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

组合式写法:
onBeforeMount

import { onBeforeMount} from 'vue'
// 组件视图渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})
  • mounted/onMounted

  1. mounted:选项式生命周期函数、onMounted:组合式生命周期钩子

  2. 组件视图在浏览器渲染之后调用

  3. 可访问组件实例东西(数据源、函数、计算属性等)

  4. 可以访问组件视图中的DOM元素

选项式写法:

Mount

  // 组件视图渲染之后
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:
onMounted

import { onMounted} from 'vue'
// 组件视图渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

beforeUpdate/onBeforeUpdate

  1. beforeUpdate:选项式生命周期函数、onBeforeUpdate:组合式生命周期钩子

  2. 数据源发生变化时,组件视图重新渲染之前调用

  3. 可访问组件实例东西(数据源、函数、计算属性等)

  4. 可以访问该组件中在更新之前的DOM元素,但是不能访问该组件中在更新之后的DOM元素

选项式写法:

beforeUpdate

 // 数据源发生改变,视图重新渲染前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变,视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:
onBeforeUpdate

import { onBeforeUpdate } from 'vue'
// 数据源发生变化,组件视图重新渲染之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化,组件视图重新渲染之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})
  • updated/onUpdated

  1. updated:选项式生命周期函数、onUpdated:组合式生命周期钩子

  2. 数据源发生变化时,组件视图重新渲染之后调用

  3. 可访问组件实例东西(数据源、函数、计算属性等)

  4. 不可以访问该组件中在更新之前的DOM元素,但是可以访问该组件中在更新之后的DOM元素

选项式写法:

updated

 // 数据源发生改变,视图重新渲染后
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
        console.log('----------------------------')
        console.log('updated 数据源发生改变,视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:
onUpdated

import { onUpdated } from 'vue'
// 数据源发生变化,组件视图重新渲染之后
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化,组件视图重新渲染之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})
  • beforeUnmount/onBeforeUnmount

  1. abeforeUnmount:选项式生命周期函数、onBeforeUnmount:组合式生命周期钩子

  2. 组件实例被卸载之前调用

  3. 可访问组件实例东西(数据源、函数、计算属性等)

  4. 可以访问组件视图中的DOM元素

选项式写法:

beforeUnmount

// 组件在卸载之前
    // 可以访问组件中的数据,函数,自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法:
onBeforeUnmount

import { onBeforeUnmount } from 'vue'
// 组件卸载之前
// 能访问组件实例的东西(数据源、函数等)
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
}) 
  • unmounted/onUnmounted


  1. unmounted:选项式生命周期函数、onUnmounted:组合式生命周期钩子

  2. 组件实例被卸载之后调用

  3. 可访问组件实例东西(数据源、函数、计算属性等)

  4. 不可以访问组件视图中的DOM元素

  5. 一般在这个生命周期函数里,我们可以手动清理一些副作用,例如计时器、DOM事件监听器或者与服务器的连接

选项式写法:

unmounted

// 组件已卸载
    // 可以访问组件中的数据,函数,自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }

组合式写法:
onUnmounted

import { onUnmounted} from 'vue'
// 组件卸载之后
// 能访问组件实例的东西(数据源、函数等)
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后(生命周期钩子)')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
}) 

总结

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。文章来源地址https://www.toymoban.com/news/detail-803967.html

到了这里,关于关于vue3生命周期的使用、了解以及用途(详细版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 的生命周期

    1、初始化阶段: 【1】beforeCreate == setup() data挂载之前 【2】created == setup() data挂载了,但是写的模板语法没有渲染到页面上 【3】beforeMount == onBeforeMount 挂载了,但是页面没有渲染 【4】mounted == onMounted 页面渲染结束 --------------------------------------全部Vue初始化完成了 ------------

    2024年02月09日
    浏览(43)
  • K8s: 关于Kubernetes中的Pod的生命周期(状态)以及生命周期的钩子函数处理

    pod 的生命周期 1 ) pod 几种常用状态 1.1 )Pending(挂起) Pod 已被 Kubernetes 系统接受,但有一个或者多个容器尚未创建亦未运行 此阶段包括等待 Pod 被调度的时间和通过网络下载镜像的时间。 1.2 )Running(运行中) Pod 已经绑定到了某个节点,Pod 中所有的容器都已被创建 至少有

    2024年04月22日
    浏览(57)
  • Vue3全家桶 - Vue3 - 【7】生命周期

    Vue3官网-生命周期钩子函数; 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听、编译模板、挂载实例到 DOM ,以及在数据改变时更新 DOM 。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常见的是

    2024年03月13日
    浏览(57)
  • 【前端】重学vue,vue生命周期基础知识了解一下

    上一篇有写到vue的node环境的安装,具体的地址node安装,可点过去看下安装步骤,目前去node官网下载默认是最新版本的18.15.0版本。这个版本可能有些高,可以选择跟目前项目匹配的版本下载安装即可。 如果项目启动遇到项目启动不成功,如下图 这样肯定是node版本的问题,解

    2023年04月09日
    浏览(51)
  • vue3-生命周期钩子函数

    声明周期函数onMounted ,onUnmounted,onUpdated onMounted:页面渲染之前执行,执行完,页面就出来了 onUnmounted:组件注销之前执行,执行完组件就不在页面显示了。如果隐藏组件就行执行。 onUpdated:当组件内的内容发生变化时,就会执行这个更新钩子函数,比如删除数组中的某个元素

    2024年02月11日
    浏览(43)
  • 【Vue3】学习笔记-生命周期

    Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate === setup() created ======= setup() beforeMount === onBeforeMount mounted ======= onMo

    2024年02月11日
    浏览(41)
  • 关于uniapp和Vue的生命周期

    前端的升命周期一般指的是,一个页面、一个网站从创建开始,到应用关闭,走过的一个流程。就像人的一生一样,从出生,到工作,到死去。 生命周期的意义在于,可以实时把控住页面等对象在生命周期的各个过程中的状态。 比如一个页面,在创建前会调用beforeCreat方法,

    2024年02月08日
    浏览(40)
  • Vue3通透教程【七】生命周期函数

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月02日
    浏览(41)
  • 【JavaEE】深入了解Spring中Bean的可见范围(作用域)以及前世今生(生命周期)

    【JavaEE】Spring的开发要点总结(4) 在学习Spring中,Bean是最核心的操作资源 使用学习Bean对象是一个重点,我们已经知道如何存储它,获取它,现在我们要知道: 它的作用域,我们才可以知道怎么使用,才能得心应手,符合预期~ 它的生命周期,我们才能更加清楚的了解它的

    2024年02月14日
    浏览(47)
  • Vue3 第三节 计算属性,监视属性,生命周期

    1.computed计算属性 2.watch监视函数 3.watchEffect函数 4.Vue的生命周期函数 计算属性简写和完整写法 2.1 监视情况分类  情况① 监视ref定义的响应式数据: 第一个参数是监视的数据,第二个参数是一个回调函数 immediate:一上来就执行,放到第三个参数中 情况② 监视多个ref定义的响应

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包