前言
每一个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处
组合式写法没有 beforeCreate / created 生命周期,并且组合式写生命周期用哪个先引哪个
-
beforeCreate
-
beforeCreate选项式声明周期函数
-
.在组件实例初始化之前调用(props解析已解析、data和computed等选项还未处理)
-
不能访问组件的实例this及其组件中的数据源和函数等
-
不能访问组件中的视图DOM元素
-
组合式 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
-
created选项式生命周期函数
-
在组件实例化成功后调用
-
可访问组件的实例this及其组件中的数据源和函数等
-
不能访问组件中的视图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
- beforeMount:选项式生命周期函数、onBeforeMount:组合式生命周期钩子
- 组件视图在浏览器渲染之前调用
- 可访问组件实例东西(数据源、函数、计算属性等)
- 不能访问组件视图中的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
-
mounted:选项式生命周期函数、onMounted:组合式生命周期钩子
-
组件视图在浏览器渲染之后调用
-
可访问组件实例东西(数据源、函数、计算属性等)
-
可以访问组件视图中的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
-
beforeUpdate:选项式生命周期函数、onBeforeUpdate:组合式生命周期钩子
-
数据源发生变化时,组件视图重新渲染之前调用
-
可访问组件实例东西(数据源、函数、计算属性等)
-
可以访问该组件中在更新之前的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
-
updated:选项式生命周期函数、onUpdated:组合式生命周期钩子
-
数据源发生变化时,组件视图重新渲染之后调用
-
可访问组件实例东西(数据源、函数、计算属性等)
-
不可以访问该组件中在更新之前的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
-
abeforeUnmount:选项式生命周期函数、onBeforeUnmount:组合式生命周期钩子
-
组件实例被卸载之前调用
-
可访问组件实例东西(数据源、函数、计算属性等)
-
可以访问组件视图中的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
-
unmounted:选项式生命周期函数、onUnmounted:组合式生命周期钩子
-
组件实例被卸载之后调用
-
可访问组件实例东西(数据源、函数、计算属性等)
-
不可以访问组件视图中的DOM元素
-
一般在这个生命周期函数里,我们可以手动清理一些副作用,例如计时器、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文章来源:https://www.toymoban.com/news/detail-803967.html
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模板网!