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

Vue-生命周期

news 来源：原创 2025/6/14 8:16:03

生命周期

简介

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 函数首次被调用。这一步中，模板编译/挂载尚未开始
此时：

页面呈现的是 未经Vue编译 的DOM结构
所有对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 替换，并挂载到实例上去之后调用该钩子。
此时：

页面呈现的是 经过Vue编译 的DOM结构
所有对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},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>