vue生命周期

最新推荐文章于 2023-12-12 11:55:46 发布
最新推荐文章于 2023-12-12 11:55:46 发布
阅读量282 收藏
点赞数
分类专栏： vue 文章标签： vue vue生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_ID/article/details/118898161
版权

vue生命周期

1.0_人的-生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

在这里插入图片描述

Vue_生命周期

在这里插入图片描述

1.1_钩子函数

目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

  • 初始化
  • 挂载
  • 更新
  • 销毁
阶段方法名方法名
初始化beforeCreatecreated
挂载beforeMountmounted
更新beforeUpdateupdated
销毁beforeDestroydestroyed

官网文档

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

在这里插入图片描述

1.2_初始化阶段

目标: 掌握初始化阶段2个钩子函数作用和执行时机

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

​ 没有. 调用$mount()方法

​ 有, 继续检查template选项

在这里插入图片描述
components/Life.vue - 创建一个文件

<template>
  <div>
      <!-- template其实是一个模板，还不是真实的  DOM，挂载后才生成真实的 DOM -->
      <h1>这是一个子组件，用来查看生命周期函数</h1>
      <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:"hello vue"
        }
    },
beforeCreate () {
    console.log( "beforeCreate -- 执行了");
    console.log(document.querySelector('h1'));
    console.log(11111,this.msg);  //  null  ，数据还没初始化
},
created () {
    console.log( "beforeCreate -- 执行了");
    // 注意：初始化阶段其实还没有  DOM
    console.log(222222,this.msg);  //  hello vue  ，有数据了
    // 一般发送网络请求是在  create 中
    setTimeout( () => {
        console.log('获取网络数据请求成功');
        this.msg = "网络数据"
    },1000)
}
}
</script>

<style>

</style>

App.vue - 引入使用

<template>
  <div>
    <Life></Life>
  </div>
</template>

<script>
import Life from './components/Life.vue'
export default {
components: {
    Life
}
}
</script>

<style>

</style>

1.3_挂载阶段

目标: 掌握挂载阶段2个钩子函数作用和执行时机

含义讲解:

1.template选项检查

​ 有 - 编译template返回render渲染函数

​ 无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

在这里插入图片描述

components/Life.vue - 创建一个文件

<template>
  <div>
      <!-- template其实是一个模板，还不是真实的  DOM，挂载后才生成真实的 DOM -->
      <h1>这是一个子组件，用来查看生命周期函数</h1>
      <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:"hello vue"
        }
    },
beforeCreate () {
    // console.log( "beforeCreate -- 执行了");
    // console.log(document.querySelector('h1'));
    // console.log(11111,this.msg);  //  null  ，数据还没初始化
},
created () {
    // console.log( "beforeCreate -- 执行了");
    // // 注意：初始化阶段其实还没有  DOM
    // console.log(222222,this.msg);  //  hello vue  ，有数据了
    // // 一般发送网络请求是在  create 中
    // setTimeout( () => {
    //     console.log('获取网络数据请求成功');
    //     this.msg = "网络数据"
    // },1000)
},
beforeMount () {
    console.log( "beforeMount -- DOM挂载前");
    console.log(33333,document.querySelector('h1'));
},
mounted () {
    console.log( "mounted -- DOM挂载完成");
    console.log(44444,document.querySelector('h1'));
}
}
</script>

<style>

</style>

1.4_更新阶段

目标: 掌握更新阶段2个钩子函数作用和执行时机

含义讲解:

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

在这里插入图片描述

components/Life.vue - 创建一个文件

准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

<template>
  <div>
      <!-- template其实是一个模板，还不是真实的  DOM，挂载后才生成真实的 DOM -->
      <h1>这是一个子组件，用来查看生命周期函数</h1>
      <h2>{{ msg }}</h2>
       <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:"hello vue",
            arr:[1,2,3,4]
        }
    },
beforeCreate () {
    // console.log( "beforeCreate -- 执行了");
    // console.log(document.querySelector('h1'));
    // console.log(11111,this.msg);  //  null  ，数据还没初始化
},
created () {
    // console.log( "beforeCreate -- 执行了");
    // // 注意：初始化阶段其实还没有  DOM
    // console.log(222222,this.msg);  //  hello vue  ，有数据了
    // // 一般发送网络请求是在  create 中
    // setTimeout( () => {
    //     console.log('获取网络数据请求成功');
    //     this.msg = "网络数据"
    // },1000)
},
beforeMount () {
    // console.log( "beforeMount -- DOM挂载前");
    // console.log(33333,document.querySelector('h1'));
},
mounted () {
    // console.log( "mounted -- DOM挂载完成");
    // console.log(44444,document.querySelector('h1'));
},
    // 只有 data 数据发生变化时
beforeUpdate () {
        console.log("beforeUpdate -- DOm结构更新前");
        console.log(55555,document.querySelectorAll("#myUL>li")[4]); // undefined
},
    // 场景：获取更新后的真实 DOM 
updated () {
        console.log("updated -- DOm结构更新完成");
        console.log(66666,  document.querySelectorAll("#myUL>li")[4]); // li
}
}
</script>

<style>

</style>

1.5_销毁阶段

目标: 掌握销毁阶段2个钩子函数作用和执行时机

含义讲解:

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

在这里插入图片描述

components/Life.vue - 准备生命周期方法(Life组件即将要被删除)

<template>
  <div>
      <!-- template其实是一个模板，还不是真实的  DOM，挂载后才生成真实的 DOM -->
      <h1>这是一个子组件，用来查看生命周期函数</h1>
      <h2>{{ msg }}</h2>
       <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:"hello vue",
            arr:[1,2,3,4]
        }
    },
beforeCreate () {
    // console.log( "beforeCreate -- 执行了");
    // console.log(document.querySelector('h1'));
    // console.log(11111,this.msg);  //  null  ，数据还没初始化
},
created () {
    // console.log( "beforeCreate -- 执行了");
    // // 注意：初始化阶段其实还没有  DOM
    // console.log(222222,this.msg);  //  hello vue  ，有数据了
    // // 一般发送网络请求是在  create 中
    // setTimeout( () => {
    //     console.log('获取网络数据请求成功');
    //     this.msg = "网络数据"
    // },1000)

    // 定时器是属于浏览器的，启动后，浏览器没关闭或没有清除定时器，定时器就一直在运行
    this.timer = window.setInterval(() => {
        console.log('启动一个定时器');
    },1000)
},
beforeMount () {
    // console.log( "beforeMount -- DOM挂载前");
    // console.log(33333,document.querySelector('h1'));
},
mounted () {
    // console.log( "mounted -- DOM挂载完成");
    // console.log(44444,document.querySelector('h1'));
},
    // 只有 data 数据发生变化时
beforeUpdate () {
        // console.log("beforeUpdate -- DOm结构更新前");
        // console.log(55555,document.querySelectorAll("#myUL>li")[4]); // undefined
},
    // 场景：获取更新后的真实 DOM 
updated () {
//         console.log("updated -- DOm结构更新完成");
//         console.log(66666,  document.querySelectorAll("#myUL>li")[4]); // li
// }
},
beforeDestroy () {
    console.log('beforeDestroy -- 组件销毁前');
},
destroyed () {
    console.log('destroyed -- 组件销毁完成');
    clearInterval(this.timer)
    
}
}
</script>

<style>

</style>

父组件.vue:

<template>
  <div>
    <Life v-if="bl"></Life>
    <button @click="bl = false">点击销毁组件</button>
  </div>
</template>

<script>
import Life from './components/Life.vue'
export default {
components: {
    Life
},
data () {
  return {
    bl:true
  }
}
}
</script>

<style>

</style>
Henry_ww
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
VUE生命周期钩子函数
weixin_57844432的博客
08-23 987
VUE生命周期钩子函数 每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期钩子函数。
钩子函数
tangtian_yes的博客
03-25 2201
Vue的生命周期 钩子函数 vue的生命周期是指vue从创建到销毁的整个过程，而在vue的生命过程中会用到执行很多回调函数，这些函数叫钩子函数 1、实例创建 beforeCreate()—创建实例对象之前执行 报错: msg没有定义，表明在Vue创建之前调用，没有msg数据 created()—创建实例对象之后执行 正常输出msg的值 2、页面挂载 beforeMount()—页面挂载成功之前执行 mounted()—页面挂载之后 页面挂载是指Vue的绑定根元素 ## 3、数据更新 beforeU
Vue——生命周期自己的理解
where_slr的博客
09-09 277
看了官网的Vue生命周期和各路大神的生命周期详解，写了一点自己的见解：
vue生命周期钩子函数总结以及在项目中的应用实例讲解
m0_59157023的博客
01-12 483
vue生命周期钩子函数总结
vue实例生命周期详解
浮游的博客
04-28 392
什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 生命周期钩子 生命周期钩子：就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。
dom加载后执行 vue_Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
weixin_42525482的博客
02-01 3957
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。一、新闻滚动列表1、在created函数中获取后台数据；2、模板引擎中用v-for生成列表项；3、调用滚动函数，假设该滚动函数式原声方法写的；4、什么时候开始调用滚动函数比较合适呢？二、thi...
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
Vue生命周期
05-18
Vue相关
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue.js的生命周期是指一个Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有特定的任务和可调用的钩子函数。Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解...
Vue生命周期示例详解
08-30
在深入理解Vue生命周期之前，我们需要了解一些基本概念，如组件、数据绑定和Vue实例。 Vue生命周期涉及到的主要阶段包括： 1. **beforeCreate**：在实例被创建后，但数据观测（data observer）和属性及方法...
Vue生命周期.xmind
01-29
Vue生命周期.xmind
超详细的vue生命周期详解
m0_73490373的博客
06-20 5071
学习vue的生命周期对开发人员来说有非常大的帮助，他使开发人员可以更清楚地认识vue的工作流程。每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听编译模板挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。下方图片中红色框即是vue的生命周期VUE生命周期图。
第15节:Vue3 DOM 更新完成nextTick()
最新发布
特创数字
12-12 396
在上面的示例中，我们使用了nextTick()函数来延迟执行某些操作。在changeText方法中，我们首先改变了message的值，然后调用nextTick()函数来等待DOM更新完成。另外，如果你在nextTick()函数外部使用了其他异步操作，例如setTimeout()或Promise.then()等，它们可能会在DOM更新完成之前执行完成，因此你需要谨慎处理异步操作的顺序和时机。通过使用nextTick()函数，我们可以确保在DOM更新完成后再执行某些操作，从而避免由于DOM还未更新导致的问题。
vue3 DOM元素渲染完成之后执行
qq_25741071的博客
08-31 5048
函数是异步执行的，因此回调函数中的代码会在下次DOM更新循环结束后执行。这样可以确保在DOM渲染完成后执行代码，避免出现操作尚未渲染的DOM元素的问题。的回调函数中，可以执行需要在DOM渲染完成后执行的操作，例如操作已经渲染的DOM元素、获取DOM元素的尺寸、执行动画等。函数会在下次DOM更新循环结束之后执行提供的回调函数。函数来在DOM元素渲染完成之后执行代码。例如，在Vue 3的组件中，可以这样使用。在Vue 3中，可以使用。
Vue3 的生命周期函数
廖若星辰-LTY
10-25 2275
此时内存中的数据已经被修改，但还没有更新到页面上，可以访问到旧的DOM。，用于跟踪所有响应式变量和方法，一旦页面有 update ，就会跟踪他们并。，与 keep-alive 一起使用，当 keep-alive 包裹的。，与 keep-alive 一起使用，当 keep-alive 包裹的。，此时内存数据已经修改，页面数据也已经更新，可以访问到新的DOM。，状态触发，同样是vue3新引入的钩子函数，，状态跟踪，vue3新引入的钩子函数，，挂载完成后调用，此时。，卸载组件实例后调用。
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值