【vue2】vue生命周期的理解

简介: vue生命周期的介绍、vue生命周期钩子函数详解,vue生命周期的执行顺序

一、生命周期介绍

概念:

即一个组件从创建到销毁的一个完整的过程

b66966f42d554855a04c4359ac0c9eca.png

二、生命周期的构成

钩子概念: vue从创建到销毁过程中,会执行的一些回调函数

1. 生命周期的四个阶段 :

  • 初始化阶段:  beforeCreate、 created
  • 挂载阶段 : beforeMount、mounted
  • 更新阶段 : beforeUpdate、updated

销毁阶段:  beforeDestroy、destroyed

执行顺序 钩子函数 执行时机

1 beforeCreate(){}

vue实例创建了,但是el和data还没有创建 (准备创建data)

底层(初始化vue实例,初始化钩子函数,初始化一些事件和侦听器配置项)

2 created() {}

data数据创建了,但是el挂载点还没有创建 (准备创建el)

底层:初始化data中的数据和methods中的方法

3 beforeMount() {}

el挂载点创建了,但是data数据还没有渲染(准备渲染中)

底层:创建el挂载点,并且生成虚拟DOM

4 mounted() {}

data数据 第一次 渲染完毕 (完成初始渲染)

底层:将虚拟dom渲染成真实DOM

5 beforeUpdate() {} 检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中) 会执行多次

6 updated() {} 变化后的data数据 ,完成渲染到页面 (完成重新渲染,会重复执行

7 beforeDestroy() {}

vue实例销毁即将销毁(解除data与el的关联),之后修改data,页面不会被渲染

底层 : 解除 事件绑定、侦听器、组件

8 destroyed() {}

vue实例已经销毁

2.八大钩子作用:

[前置准备]先创建一个空的vue文件,写入我们需要的素材

<template>
  <div>
    <button @click=" name='李四' ">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "张三",
      age: 20
    };
  }
};
</script>
<style>
</style>

上述页面浏览效果如下:

21d2873710164609afc5a53d5b59c8bb.png

1.beforeCreate():

  • vue实例创建了,但是el和data还没有创建 (准备创建data)
  • 底层(初始化vue实例,初始化钩子函数,初始化一些事件和侦听器配置项)
/* 生命周期钩子 */
// 1. beforeCreate() :  创建了vue实例,但是还没有创建data  
beforeCreate() {
    console.log(1);
    console.log(this);
    console.log(this.name);
  }

写入beforeCreate页面效果查看:

bb78f9cf8b134f7f92be1603222d25d4.png

我们是生成了初始的vue实例,但是我们存放在data中的数据没有取到

2.created()

  • 创建初始了data,但是还没有挂载
  • 经典应用 : 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面
// 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子, 一般在这个钩子发送ajax */
  created() {
    console.log(2);
    console.log(this);
    console.log(this.name);
    console.log(this.$el);
  }

写入created页面效果查看:

52b627988fcc41499b3522f8d9fb2fbb.png

此时我们存放在data中的数据被找到了 ,但是我们的挂载点没有被找到

3.beforeMont()

创建挂载点,但是还没有把data挂载到el

// 3.beforeMount() : 创建挂载点,但是还没有把data挂载到el
  beforeMount() {
    console.log(3);
    console.log(this);
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); //null 没有渲染,所以无法获取dom
  }

写入beforeMont页面效果查看:

ab61c22e2c9240d49343a3953929c40b.png

这一步是生成创建我们的挂载点

4.monted()

  • 完成初始渲染。 把data数据渲染到挂载点el
  • 经典应用 : 一般常用于操作dom(页面一家在需要操作DOM在这个钩子上)
mounted() {
    console.log(4);
    console.log(this);
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); // p标签 完成渲染
  }

 写入monted页面效果查看:

75b564aabd9d4499a4df3da47a09a8ea.png

我们的挂载点创建成功,讲我们data中的数据存放进去并渲染成功啦!

经历了上述的四个阶段的操作现在我们完成了组件data中的被数据获取到页面渲染的整个流程,接下来的钩子是用于修改data数据与销毁我们的vue实例

5.beforeUpdata()

检测到data数据发生变化,但是还没有更新el

检测data数据变化, 修改虚拟DOM

当有data数据改变 – 重复这个循环( beforeUpdata()与updated() )

写入beforeUpdata页面效果查看:

第一步:先在我们的vue中打一个debuddgr断点,防止我们走到updataed的位置

beforeUpdate() {
    console.log(5);
    console.log(this);// 获取的是变化后的数据, 但是页面还是显示之前的数据
    debugger
  }

第二步:我们现在在vuetools中修改data中的数据,当修改数据后面不变化!当我确定的时候会依旧变成张三。但是我们的内存中会显示出我们修改过的内容

bc9b879dfa7f42bb98a285d5d55ab095.png

07112ef641df48968049bdda4aeb9895.png

可以看到我们的vue实例对象中的name被我们成功的修改了,但是大家看右上角的张三,并没有被我们修成。

【再次验证】这是我们直接修改data中的数据,当我们点击 “点我改名字”这个按钮的时候也会出现

8ea81cc9f5d648888ca649b5d0582547.png

之后我们卡在这里了,当我们点击箭头的时候,我们的vue就更新了

5470ecd04d7b4c4f9402cd77574156c1.png

6.updated()

  • 更新之后的data,完成渲染
  • 完成data渲染(将虚拟DOM渲染成真实DOM)
// 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6);
    console.log(this);
  }

写入updated页面效果查看:


7c68bde22a164809b0c19499e26163f4.png

显而易见当我们修改之后我们的数据马上就渲染到页面上了。实现了彻底更新的操作

7.beforeDestroy()

正在销毁(接触data与el绑定、移除事件监听、移除侦听器)

 触发销毁钩子的两个条件

 (1)对组件使用v-if

 (2)调用组件的 this.$destroy()

写入beforeDestroy页面效果查看:

15ffa4477a6e412d9748fc7c56286351.png

我们的vue实例正在被销毁

8.destroyed()

完成销毁

//8.destroyed(): 完成销毁
    destroyed() {
    console.log(8);
    console.log(this);
  }

  写入destroy页面效果查看:

8c8ca73425b74c95803990a9686a56b9.png

至此我们的vue实例对象从出生创建到销毁喽

上述操作的源代码见下:

App.vue

<template>
  <div>
    <button @click="name = '李四'">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '张三',
      age: 20,
    }
  },
  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例,但是还没有创建data
  beforeCreate() {
    console.log(1)
    console.log(this)
    console.log(this.name)
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子, 一般在这个钩子发送ajax */
  created() {
    console.log(2)
    console.log(this)
    console.log(this.name)
    console.log(this.$el)
  },
  // 3.beforeMount() : 创建挂载点,但是还没有把data挂载到el
  beforeMount() {
    console.log(3)
    console.log(this)
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el)
    const p = document.querySelector('p')
    console.log(p) //null 没有渲染,所以无法获取dom')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log(4)
    console.log(this)
    console.log(this.$el)
    const p = document.querySelector('p')
    console.log(p) // p标签 完成渲染
  },
  // 5.beforeUpdate() : 检测到data数据发生变化,但是还没有更新el
  beforeUpdate() {
    console.log(5)
    console.log(this) // 获取的是变化后的数据, 但是页面还是显示之前的数据
    // eslint-disable-next-line no-debugger
    debugger
  },
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6)
    console.log(this)
  },
  // 7.beforeDestroy(): 正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
  /*触发销毁钩子的两个条件 
  (1)对组件使用v-if
  (2)调用组件的 this.$destroy() 
  */
  beforeDestroy() {
    console.log(7)
    console.log(this)
    // eslint-disable-next-line no-debugger
  },
  //8.destroyed(): 完成销毁
  destroyed() {
    console.log(8)
    console.log(this)
  },
}
</script>
<style>
</style>

三、执行顺序

即按照我们介绍钩子函数的顺序依次往下执行

App.vue

<template>
  <div>
    <!-- 导入子组件 -->
    <son></son>
  </div>
</template>
<script>
import son from '@/components/son.vue'
export default {
  components: { son },
  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例,但是还没有创建data
  beforeCreate() {
    console.log('父的beforeCreate')
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子, 一般在这个钩子发送ajax */
  created() {
    console.log('父的Created')
  },
  // 3.beforeMount() : 创建挂载点,但是还没有把data挂载到el
  beforeMount() {
    console.log('父的beforeMount')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log('父的Mounted')
  },
}
</script>
<style>
</style>

son.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
  </div>
</template>
<script>
export default {
  beforeCreate() {
    console.log('子的beforeCreate')
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子, 一般在这个钩子发送ajax */
  created() {
    console.log('子的Created')
  },
  // 3.beforeMount() : 创建挂载点,但是还没有把data挂载到el
  beforeMount() {
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log('子的beforeMount')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log('子的Mounted')
  },
}
</script>
<style>
</style>

我们跑一下看下执行效果:

106173c5aa8f44c1aa25eb3b63058a1b.png

发现是我们父元素先执行到beforeMont,随后等子渲染完成(执行子的mounted)最后将父的mounted执行完成,完成我们最终的渲染。虽然是有包含关系,但是执行流程是不变的。


相关文章
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
571 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
111 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
246 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
375 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
770 4
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
548 77

热门文章

最新文章