vue 生命周期-详细理解

最新推荐文章于 2023-09-18 17:09:49 发布

努力学习前端的77

最新推荐文章于 2023-09-18 17:09:49 发布

阅读量246

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36545813/article/details/107933678

版权

vue实例的生命周期什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板b

摘要由CSDN通过智能技术生成

参考：
vue实例的生命周期
 推荐一篇干货博客
 一定要看看这篇博客的评论

什么是生命周期：

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件

主要的生命周期函数分类：

1，创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，整个页面被创建之前。
此时，data 和 methods 还不可用，el不可用。
created：实例已经在内存中创建完毕，模板编译前。
此时， data 和 methods可用，el , property 目前尚不可用。
在这里更改数据不会触发updated钩子函数。
一般可以在这里做初始数据的获取。
beforeMount：模板编译完成，挂载前。el不可用。 在这里更改数据，不会触发updated。
mounted：挂载完成。组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了。
此时，挂载元素el可用。如果要通过某些插件操作页面上的DOM，最早应该在mounted中操作。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
   
  this.$nextTick(function () {
   
    // Code that will run only after the entire view has been rendered
  })
}

2，运行期间的生命周期函数：

只有当数据data发生改变后，才会触发这两个函数。

beforeUpdate：在重新渲染之前触发。此时 data 中的状态值是最新的，但此时还没有开始重新渲染DOM节点，所以页面上还没有更新。这里不能更改数据，否则会陷入死循环
updated：DOM渲染之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ 这里不能更改数据，否则会陷入死循环。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用vm.$nextTick：

当updated钩子被调用时，组件 DOM 已经更新，现在可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 。

updated: function () {
   
  this.$nextTick(function () {
   
    // Code that will run only after the entire view has been re-rendered
  })
}

以下两个函数只有当组件被keep-alive包裹时调用才有效

activated:被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated:被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。

3，销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。常用来销毁一些监听事件和定时器。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

在这里插入图片描述

来看个demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{
   {
   message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
   
    el: '#app',
    data: {
   
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
   
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " +

最低0.47元/天解锁文章

努力学习前端的77

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 生命周期-详细理解

vue实例的生命周期什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板b
复制链接

扫一扫

专栏目录