当前位置： 首页 > ops >正文

Vue-生命周期

ops 2025/6/18 8:46:13

生命周期

简介

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

在这里插入图片描述

beforeCreate

实例初始化之后，数据观测、数据代理、事件配置之前被调用。
此时：无法通过 vm 访问到 data、computed、methods 上的方法和数据

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

created

实例初始化后立即调用，数据观测、数据代理、事件配置已完成。
此时：可以通过 vm 访问到 data、computed、methods 上的方法和数据

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)debugger},created() {console.log('生命周期：created')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。这一步中，模板编译/挂载尚未开始
此时：

  1. 页面呈现的是 未经Vue编译 的DOM结构
  2. 所有对DOM的操作，最终 不生效

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>插值语法：{{name}}</h2><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)// debugger},created() {console.log('生命周期：created')console.log(this)// debugger},beforeMount() {console.log('生命周期：beforeMount')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
此时：

  1. 页面呈现的是 经过Vue编译 的DOM结构
  2. 所有对DOM的操作，均生效，至此初始化过程结束；
  3. 一般此时进行：开启定时器、发送网络请求等初始化操作

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>插值语法：{{name}}</h2><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)// debugger},created() {console.log('生命周期：created')console.log(this)// debugger},beforeMount() {console.log('生命周期：beforeMount')console.log(this)// debugger},mounted() {console.log('生命周期：mounted')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。
此时：数据是新的，页面是旧的，还没重新渲染
（页面尚未和数据保持同步）

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);debugger;},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

updated

数据更新时调用，发生在重新渲染之后。
此时：数据是新的，页面是新的，已经重新渲染
（页面和数据保持同步）

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);debugger;},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},},filters: {},});</script>
</html>
  • 效果
    在这里插入图片描述

beforeDestroy

实例销毁之前调用。
此时：vm种所有的东西均可用，即将执行销毁过程。
所有对数据的更新，均不回走更新流程了。
一般此时进行：关闭定时器、取消订阅消息等操作

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button><h2>销毁</h2><button @click="destoyVm">销毁</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);// debugger;},beforeDestroy(){console.log("生命周期：beforeDestory");console.log(this.name);debugger;},// destroyed() {//   console.log("生命周期：destroyed");//   console.log(this.name);//   debugger;// },computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},destoyVm(){console.log("销毁vm方法了...");this.$destroy()}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，> 所有的事件监听器会被移除，所有的子实例也会被销毁。
此时： vm实例都没有了

案例

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button><h2>销毁</h2><button @click="destoyVm">销毁</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);// debugger;},beforeDestroy(){console.log("生命周期：beforeDestory");console.log(this.name);// debugger;},destroyed() {console.log("生命周期：destroyed");},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},destoyVm(){console.log("销毁vm方法了...");this.$destroy()}},filters: {},});</script>
</html>
  • 效果

在这里插入图片描述

常用

  • mounted ：初始化操作
    • 发送请求
    • 启动定时器
    • 绑定自定义事件
    • 订阅消息
  • beforeDestroy：收尾操作
    • 清除定时器
    • 解绑自定事件
    • 取消订阅
http://www.xdnf.cn/news/13969.html

相关文章：

  • OpenFeign声明式调用实战指南
  • Kubernetes安全机制深度解析（四）：动态准入控制和Webhook
  • 前端面试专栏-基础篇：6. 跨域方案全对比（CORS/JSONP/Nginx）与安全攻防
  • Linux驱动学习day4
  • 【Twisted】Python 使用Twisted实现TCP多人聊天Demo
  • 两个矩阵的卷积运算
  • 一个用专业知识库与多层RAG打造调研报告的Agent
  • vue常用框架，及更新内容
  • orb_slam--安装配置
  • C语言二维数组的使用详解
  • C++ —— STL容器 —— string的模拟实现
  • 北京大学：AI+Agent与Agentic+AI的原理与应用（适合科研从业者和技术爱好者阅读）
  • 宝塔面板WordPress中使用Contact Form 7插件收不到邮件的解决方法
  • 【AI论文】MiniCPM4：在终端设备上实现超高效的大型语言模型（LLMs）
  • 突破AI瓶颈：基于实时感知的智能选路实现智算负载均衡优化
  • 【教程】Android（AOSP）Framework开发/ROM定制快速教程
  • 本地部署 DeepSeek-R1-0528 超大语言模型全流程指南（含量化版优化实操）
  • HBase 安装与简单操作指南
  • 深入 Java 泛型：高级应用与实战技巧
  • 深度学习神经网络架构Transformer深刻理解
  • 论文略读：Ask, and it shall be given: On the Turing completeness of prompting
  • OpenCV 鼠标操作与响应之绘制ROI提取图像
  • antd vue a-range-picker如何设置不能选择当前和之后的时间，包含时分秒
  • SSM框架实现学生管理系统的需求分析与设计详解
  • 智能聊天AI Top10 排行榜 - 2025年05月
  • 牛客小白月赛118
  • 计算机图像处理：从像素到卷积与池化的深度解析
  • 护城河尚浅，理想汽车驶入慢车道
  • Java Stream API 在企业开发中的实战心得：高效、优雅的数据处理
  • 包含各种扁平化UI套件的psd适用于博客电商类移动端网站项目