生命周期Life Cycle
含义
指一个组件从创建->运行->销毁的整个时间段,强调的是一个时间段。
生命周期函数
含义
vue框架提供的内置函数,会伴随组件的生命周期,自动按次序运行。
分类
-
组件创建阶段
-
组件运行阶段
-
组件销毁阶段
1. 组件创建阶段
最多只执行一次
new Vue() ——> beforeCreate ——> created ——> beforeMount(渲染之前) ——> mounted ——>
2. 组件运行阶段
执行0——n次
——> beforeUpdate ——> undated ——>
3. 组件销毁阶段
最多只执行一次
——> beforeDestory ——> destoryed
图示实例的生命周期
一个组件从创建到销毁的过程
webpack从main.js开始打包,发现main.js里面用到了App,然后把App的实例创建出来,App里面又用到了child,child里又用到了count;以树的形式嵌套。webpack把整个树解析,转换,编译成js代码以src形式放到index.html内。浏览器再解析编译这个代码,渲染到页面上。
图解
解释
-
new Vue():创建组件的实例对象
-
init Events&Lifecycle:初始化事件和生命周期函数
-
beforeCreate:组件的props/data/methods尚未被创建,都处于不可用状态
-
init injections&reactivity:初始化props/data/methods
-
created:组件的props/data/methods已创建好,都处于可用的状态,但是组件的模板结构尚未生成!,这个阶段非常重要,可以发起ajax请求。
常用的生命周期钩子函数:
-
beforeCreate:在实例被创建之前调用,此时组件的数据、事件等还未初始化。
-
created:在实例创建完成后调用,此时组件的数据、事件等已经初始化完成,可以进行数据的获取和处理。
-
beforeMount:在组件挂载到 DOM 之前调用,此时组件的模板已经编译完成,但尚未挂载到页面。
-
mounted:在组件挂载到 DOM 后调用,此时组件已经被添加到页面中,可以进行 DOM 操作和异步请求等操作。
-
beforeUpdate:在组件更新之前调用,当组件的数据发生变化时会触发该钩子函数。
-
updated:在组件更新完成后调用,当组件的数据变化导致重新渲染时会触发该钩子函数。
-
beforeDestroy:在组件销毁之前调用,可以进行一些清理工作,比如清除定时器、解绑事件等。
-
destroyed:在组件销毁后调用,此时组件实例已经被销毁,不再可用。
另外还有一些较少用到的钩子函数,如 activated 和 deactivated,它们是用于配合 Vue Router 中的路由切换过渡效果的。
需要注意的是,Vue 3.x 版本中的生命周期钩子函数发生了一些变化,具体的钩子函数名称和调用时机可能有所不同,详细信息可以参考 Vue 官方文档。
在使用生命周期钩子函数时,你可以在组件内部通过在 methods
中定义相应的函数来实现特定的逻辑。每个生命周期钩子函数都会传入一个参数,代表当前的生命周期上下文,你可以在函数中访问和操作组件的数据、方法等。
综合示例
<template> <div class="test-container"> <h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3> <p id="pppp">message 的值是:{{ message }}</p> <button @click="message += '~'">修改 message 的值</button> </div> </template> <script> export default { props: ['info'], data() { return { message: 'hello vue.js', // 定义 books 数组,存储的是所有图书的列表数据。默认为空数组! books: [] } }, watch: { message(newVal) { console.log('监视到了 message 的变化:' + newVal) } }, methods: { show() { console.log('调用了 Test 组件的 show 方法!') }, // 使用 Ajax 请求图书列表的数据 initBookList() { const xhr = new XMLHttpRequest() xhr.addEventListener('load', () => { const result = JSON.parse(xhr.responseText) console.log(result) this.books = result.data }) xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks') xhr.send() } }, // 创建阶段的第1个生命周期函数 beforeCreate() { // console.log(this.info) // console.log(this.message) // this.show() }, created() { // created 生命周期函数,非常常用。 // 经常在它里面,调用 methods 中的方法,请求服务器的数据。 // 并且,把请求到的数据,转存到 data 中,供 template 模板渲染的时候使用! this.initBookList() const dom = document.querySelector('#myh3') console.info(dom)//null//此时组件还未被添加到页面,模板结构尚未生成! }, beforeMount() {//这个生命周期函数没什么意义,几乎无用 //这个生命周期函数里也可以发送ajax请求,但是越早发早生成数据。因此还是created阶段。 //console.info('beforeMount')//beforeMount //const dom = document.querySelector('#myh3') ///console.info(dom)//null }, // 如果要操作当前组件的 DOM,最早,只能在 mounted 阶段执行 mounted() { //$el 是 Vue 实例的一个属性,用于访问实例对应的根 DOM 元素 console.info(this.$el) const dom = document.querySelector('#myh3') console.info(dom) }, //data发生变化就会触发这个函数,将最新的数据,重写渲染模板结构。 beforeUpdate() { //钩子函数在组件数据更新之前被调用,此时组件的数据已经更新,但尚未应用到 DOM 上。它在组件更新之前提供了一个操作数据的时机。 console.log('beforeUpdate') console.log(this.message)//每次按下按钮,在beforeUpdate阶段数据发生了变化。 const dom = document.querySelector('#pppp') console.log(dom.innerHTML)//每次按下按钮,在beforeUpdate阶段dom还没变。 }, // 当数据变化之后,为了能够操作到最新的 DOM 结构,必须把代码写到 updated 生命周期函数中 updated() { // console.log('updated') // console.log(this.message) // const dom = document.querySelector('#pppp') // console.log(dom.innerHTML) }, beforeDestroy() { console.log('beforeDestroy') this.message = 'aaa' console.log(this.message) }, destroyed() { console.log('destroyed') // this.message = 'aaa' } } </script> <style lang="less" scoped> .test-container { background-color: pink; height: 200px; } </style>
$el
$el
是 Vue 实例的一个属性,用于访问实例对应的根 DOM 元素。
在 Vue 组件中,$el
指向组件实例渲染后的根元素。可以通过 $el
访问和操作组件的 DOM 元素,例如修改样式、添加事件监听器等。
需要注意的是,在组件的生命周期钩子函数 beforeMount
和 mounted
之前,$el
是 undefined
,因为组件还没有被渲染到 DOM 中。只有在组件完成挂载后,$el
才会指向实际的 DOM 元素。
另外,使用 $el
直接操作 DOM 元素可能会违背 Vue 的数据驱动思想,因为它绕过了 Vue 的响应式系统。推荐在组件中使用 Vue 的数据绑定和指令来管理 DOM,只在必要的情况下才使用 $el
来进行低层次的 DOM 操作。
示例
<script> // 访问根元素 console.log(this.$el); // 修改根元素的样式 this.$el.style.backgroundColor = 'red'; // 添加事件监听器到根元素 this.$el.addEventListener('click', handleClick); // 在钩子函数中使用 $el mounted() { // 在组件挂载后可以访问和操作 $el console.log(this.$el); } // 在自定义方法中使用 $el customMethod() { // 在自定义方法中可以访问和操作 $el console.log(this.$el); } </script>