Vue生命周期

本文详细介绍了Vue生命周期,包括其定义、三个阶段(初始化、运行中、销毁)及各阶段的钩子函数,如初始化阶段的beforeCreate、created等,还说明了钩子函数的触发条件。同时给出项目使用示例,如静态数据渲染放mounted,动态数据渲染放updated。

Vue生命周期

生命是生命周期呢?

  1. 当前组件在创建到销毁经历的一系列过程,称之为生命周期

生命周期的分为几个阶段?每个阶段有哪些钩子函数

  1. 生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
  2. 初始化阶段:有4个钩子函数 , ***** 触发条件是自动的
    • beforeCreate
      • 组件即将创建,进行组件事件和生命周期的初始化
        1. 项目中一般不使用
        2. 有的开发者也会在这里进行数据请求
        3. 这个阶段:组件创建前
          • data data选项中的数据获取不到
          • RDOM 拿不到
          • 项目中: 没什么用
          • 但是这个阶段是一个对事件和生命周期的准备阶段,也是必不可少的
    • created
      • 组件创建完成
      • 项目中:
        1. 异步请求接口数据
        2. 数据修改
        3. 这个阶段:
          • data data选项中的数据获到了
          • RDOM 拿不到
          • 项目中:
            1. 数据的修改
            2. 异步数据请求
    • beforeMount
      • 组件即将挂载
      • 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
      • 项目中:
        1. 异步请求接口数据
        2. 数据修改
        3. 这个阶段:
          • data data选项中的数据获到了
          • RDOM 拿不到
          • 项目中:
            1. 数据的修改
            2. 异步数据请求
    • mounted
      • 组件挂载结束
      • 使用真实DOM替换VDOM
      • 项目中
        1. 异步请求接口数据
        2. 数据修改
        3. 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )
        4. 这个阶段:
          • data: 可以获得数据
          • RDOM: 拿到了
          • 项目中:
            1. 数据修改
            2. 异步数据请求
            3. 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的))
    • 总结: 初始化过程中在项目中使用
      1. 数据请求:created
      2. DOM操作: mounted
      3. 数据修改: beforeMount created mounted
  3. 运行中阶段:有2个钩子函数 , 触发条件是: *******当data选项中的数据发生改变时
    • beforeUpdate:
      • 这个阶段进行的是vdom的生成和diff算法的对比,都是内部进行的,我们在项目中可以不使用
      • 表示组件即将更新 vdom --diff–> vdom的不同(patch对象)
      • 这个阶段:
        1. data: 拿到了
        2. RDOM: 获得
          • updated
          • Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化
          • 组件更新结束 , 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
          • 动态数据的渲染,进行dom操作( 第三方库的实例化 )
  4. 销毁阶段: 有2个钩子函数
    • beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
    • destoryed: 组件销毁结束
    • 这两个钩子函数没有什么去别,功能很相似
      1. 项目中: 这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例
      2. 组件销毁的两种方式:
  • 使用$destroy()方法(内部销毁)
    缺点: 会将组件的模板也保留下来
  • 使用开关销毁(外部销毁)
    v-if
    这种类型的销毁不会留有模板
  1. 有一个钩子函数可以不写,这个钩子函数就是我们 render 函数
<div id="app">
<button @click = "flag = false"> 销毁 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
<input type="text" v-model = "money">
<h3> {{ money }} </h3>
</div>
</template>
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
//初始化
beforeCreate () {
/*
这个阶段:组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中: 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段,也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段:
data data选项中的数据获到了
RDOM 拿不到
项目中:
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段:
data data选项中的数据获到了
RDOM 拿不到
项目中:
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段:
data: 可以获得数据
RDOM: 拿到了
项目中:
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )
*/
this.time = setInterval( () => {
console.log( 1 )
},1000)
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同(patch对象)
/*
这个阶段:
data: 拿到了
RDOM: 获得
这个阶段进行的是vdom的生成和diff算法的对比,都是内部进行的,我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 , 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段:
动态数据的渲染,进行dom操作( 第三方库的实例化 )
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
console.log( 'beforeDestroy ')
},
destroyed () {
clearInterval( this.time )
console.log( 'destroyed')
}
})
new Vue({
// el: '#app',
data: {
msg: 'hello 1902',
flag: true
}
}).$mount('#app')

生命周期中钩子函数的触发条件是什么

  1. data数据改变

项目中如何使用?(看代码)

  1. 静态数据渲染放在mounted钩子里
  2. 动态数据渲染放在updated钩子里

名词解释:

钩子函数: 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发

除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象

  1. 为什么是函数呢?
  • 原因:我们希望组件的数据是独立的,有一定作用域的
  1. 为什么返回值是对象?
  • 原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter

其他选项写在生命周期的上面

<!-- 轮播图例子 -->
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 死的数据 -->
<!-- <div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div> -->
<!-- data里面的数据 也是写死的,这就是静态类型-->
<div class="swiper-slide" v-for="item in lists" :key="item.id">{{item.task}}</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
new Vue({
el: '#app',
data: {
lists: null
// lists:[
// {
// id:1,
// task:111111
// },
// {
// id:2,
// task:222222
// },
// {
// id:3,
// task:333333
// }
// ]
},
created() {
fetch('./data.json')
.then(res => res.json())
.then(data => {
this.lists = data
//解决方案3 推荐这种 动态数据
//Vue 内部提供了一个Vue.nextTick/this.$nextTick(callback)
//nextTick指的是new Vue渲染dom结束之后才执行回调函数
this.$nextTick(() => {
this.swiper = new Swiper('.swiper-container', {//放在this身上,全局可以用
//direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
//解决方案二,放到任务队列中
// setTimeout(() => {
// this.swiper = new Swiper('.swiper-container', {//放在this身上,全局可以用
// //direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
// },0)
// })
})
.catch(error => {
if (error) throw error
})
},
mounted() {//这个钩子中可以拿到data和真实DOM
},
updated() {
//解决方案1
if (this.swiper) {
return false
}
// this.swiper=new Swiper('.swiper-container', {//放在this身上,全局可以用
// //direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
// })
}
})
<think>嗯,用户想了解Vue.js的生命周期及其各个阶段的钩子函数功能。首先,我需要回顾一下Vue生命周期相关知识。根据提供的引用内容,Vue生命周期分为八个阶段,每个阶段都有对应的钩子函数。用户的问题是要详细解释每个阶段和钩子函数的作用,所以我需要按照生命周期的顺序来组织回答。 首先,我应该先介绍生命周期的整体概念,说明它从实例创建到销毁的整个过程,以及钩子函数的作用。然后分阶段介绍每个钩子函数,比如创建阶段、挂载阶段、更新阶段和销毁阶段。每个阶段里有哪些钩子函数,它们的触发时机和用途是什么。比如在创建阶段,有beforeCreate和created,这两个钩子函数分别在实例初始化之后和数据观测建立之前触发,created之后可以进行数据操作,但DOM还未生成。 接下来是挂载阶段的beforeMount和mounted,这两个钩子涉及模板编译和DOM挂载。beforeMount在模板编译完成但尚未挂载到DOM时触发,而mounted在实例挂载到DOM后触发,适合进行DOM操作或第三方库初始化。 然后是更新阶段的beforeUpdate和updated,当数据变化导致DOM重新渲染时触发,beforeUpdate在虚拟DOM打补丁之前,updated在之后。需要注意的是避免在这两个钩子里修改数据,以免导致无限循环。 最后是销毁阶段的beforeDestroy和destroyed,用于清理工作,如移除事件监听或定时器。beforeDestroy在实例销毁前触发,还可以访问实例,而destroyed之后实例完全被销毁。 另外,需要提到Vue 3中的变化,比如使用setup函数替代了之前的钩子,但用户可能还在使用Vue 2,所以需要区分说明。同时,要强调正确使用生命周期钩子的重要性,比如在created中获取数据,在mounted中进行DOM操作,避免在beforeDestroy中遗漏清理导致内存泄漏。 还要考虑用户可能的后续问题,比如生命周期在实际项目中的应用、Vue 2和3的区别、常见错误处理等,提前准备相关问题。确保回答结构清晰,分点说明每个钩子函数,并引用提供的参考资料来支持内容,比如引用[1]到[4]中的描述。同时注意使用正确的LaTeX格式,虽然这个问题可能不涉及数学公式,但如果有需要的地方要正确应用。 现在需要将以上思考整理成一个结构化的回答,分阶段解释每个钩子函数,确保引用正确,并生成相关问题供用户进一步探索。还要检查是否符合用户的要求,比如使用中文,正确的代码块格式(如果有的话),以及引用标识的添加。</think>### Vue.js 生命周期详解及钩子函数功能 Vue.js 生命周期描述了 Vue 实例从创建到销毁的全过程,开发者可通过生命周期钩子函数在特定阶段执行自定义逻辑。以下按阶段详细说明各钩子函数的功能及触发时机: --- #### 一、**创建阶段** 1. **`beforeCreate`** - **触发时机**:实例初始化后,数据观测(data observer)和事件配置前 - **功能**:此时无法访问 `data` 和 `methods` 中的属性,适合初始化非响应式变量 - 代码示例: ```javascript beforeCreate() { console.log(this.message); // undefined } ``` 2. **`created`** - **触发时机**:数据观测已建立,但 DOM 未生成 - **功能**:可访问 `data` 和 `methods`,常用于异步数据请求(如 API 调用) - 示例: ```javascript created() { this.fetchData(); // 调用接口获取数据 } ``` --- #### 二、**挂载阶段** 3. **`beforeMount`** - **触发时机**:模板编译完成,但尚未挂载到 DOM - **功能**:最后一次操作虚拟 DOM 的机会,但实际 DOM 元素不可见 4. **`mounted`** - **触发时机**:实例挂载到 DOM 后 - **功能**:可操作真实 DOM,适合初始化第三方库(如图表库) - 示例: ```javascript mounted() { this.initChart(); // 渲染图表到 DOM } ``` --- #### 三、**更新阶段** 5. **`beforeUpdate`** - **触发时机**:数据变化后,虚拟 DOM 重新渲染前 - **功能**:可获取数据更新前的 DOM 状态 6. **`updated`** - **触发时机**:虚拟 DOM 重新渲染并应用补丁后 - **注意**:避免在此阶段修改数据,可能导致无限循环 --- #### 四、**销毁阶段** 7. **`beforeDestroy`** - **触发时机**:实例销毁前 - **功能**:清理定时器、解绑事件等资源释放操作 - 示例: ```javascript beforeDestroy() { clearInterval(this.timer); // 清除定时器 } ``` 8. **`destroyed`** - **触发时机**:实例销毁后 - **功能**:所有子实例和事件监听器已被移除 --- ### 生命周期图示 ```plaintext 创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段 │ │ │ │ beforeCreate beforeMount beforeUpdate beforeDestroy │ │ │ │ created mounted updated destroyed ``` --- ### 注意事项 - **Vue 3 变化**:组合式 API 中使用 `setup()` 替代 `beforeCreate` 和 `created`[^3] - **性能优化**:在 `mounted` 中避免同步修改 DOM,可能导致重复渲染 - **内存泄漏**:务必在 `beforeDestroy` 中清理全局事件监听器 --- §§ 1. Vue 生命周期钩子函数在实际项目中如何选择使用? 2. Vue 2 和 Vue 3 的生命周期有哪些区别? 3. 在 `created` 和 `mounted` 中请求数据有什么区别? 4. 为什么在 `updated` 钩子中修改数据可能导致问题? [^1]: Vue.js组件生命周期详解 [^2]: Vue实例生命周期与功能实现 : Vue.js 核心框架与生命周期阶段 [^4]: Vue实例创建到销毁的全过程解析
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值