Vue生命周期

目录

生命周期:

 案例: 编写入口js文件，创建Vue实例，并定义生命周期图内的钩子函数，测试钩子函数的各个运行时机?

1、验证beforeCreate

 2、验证created

 3、验证beforeMount

  4、验证mounted

  5、验证beforeUpdate和updated

  6、验证beforeUpdate和updated

 案例原代码：

---

生命周期:

每一个 Vue 实例从创建、运行、到销毁的一次完整过程，称之为生命周期，在这个过程中间，伴随着各种各样的事件，这些事件，称之为生命周期事件（生命周期函数、生命周期钩子），我们了解这些函数的时机，可以帮助我们在合适的位置去编写功能代码。

比如：要获取数据的时候，应该在哪里发送请求?

Vue 生命周期，最直观的方式就是官网的一张图

生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

  

• beforeCreate: Vue实例创建前，此时data 和 methods 中的 数据都还没有没初始化
• created：Vue实例已创建，data 和 methods 都已经被初始化好了
• beforeMount: html模板已准备内存中,但未渲染到页面，此时无法进行dom操作
• mounted: html模板已挂载到了页面中，此时可以进行 dom操作
• beforeUpdate:当data数据改变的时候执行的钩子函数, 此时，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
• updated:updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
• beforeDestory: vm实例被销毁前，此时data和methods等还可用
• destoryed：vm实例已销毁, data和methods等所有属性都已经不可用

 案例: 编写入口js文件，创建Vue实例，并定义生命周期图内的钩子函数，测试钩子函数的各个运行时机?

1、创建项目（create+项目  /  vue ui）

参考：

 VS code创建Vue项目 方法1：create+项目_Siobhan. 明鑫的博客-CSDN博客

Vue指令综合案例——汽车品牌管理_Siobhan. 明鑫的博客-CSDN博客

 

 在这里依然选择vue2创建项目

同样，我们修改package.json下的规则、以及启动方式，并将vue结构删除不用的部分，修改main.js中的基础结构。详细参考Vue指令综合案例——汽车品牌管理_Siobhan. 明鑫的博客-CSDN博客

 

 删除完的结构如下图：

接下来我们来演示vue的生命周期：

1、验证beforeCreate

main.js:

 index.html:

 此时，我们启动项目：npm run dev

发生如下报错：

修改vue.config.js  

 启动成功后可以看到：

 说明：Vue实例创建前，此时data 和 methods 中的 数据都还没有没初始化

 2、验证created

  created() {
    // vue实例创建完成了，此时的data和methods都已经准备好了
    console.log(this.msg);
    this.show()
  },

 3、验证beforeMount

  beforeMount() {
    // vue实例绑定的html模板已经在内存中了，但还没有挂载到界面上
    console.log(document.getElementById("h3").innerText);
  },

 说明：html模板已准备内存中,但未渲染到页面，此时无法进行dom操作

  4、验证mounted

  mounted() {
    //vue实例绑定的html模板已经挂载到界面上
    console.log(document.getElementById("h3").innerText);
  },

  说明：html模板已挂载到了页面中，此时可以进行 dom操作

  5、验证beforeUpdate和updated

这里我们比较验证，更为直观，因为当我们data数据发生改变时，都会触发相应的改变

  // 当data数据发生改变   beforeUpdate/updated
  beforeUpdate() {
    // data 已经改变成了最新的数据，但页面的数据还没有同步
    console.log("data中的msg数据是：" + this.msg)
    console.log("界面上元素的内容：" + document.getElementById("h3").innerText)
  },
  updated() {
    // 页面的数据和data的数据都是最新的，已经保持同步了
    console.log("data中的msg数据是：" + this.msg)
    console.log("界面上元素的内容：" + document.getElementById("h3").innerText)
  },

说明：beforeUpdate:当data数据改变的时候执行的钩子函数, 此时，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步

updated:updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的。

  6、验证beforeUpdate和updated

 

  beforeDestory() {
    console.log("vue实例被销毁前");
    console.log(this.msg);
    this.show();
  },
  destoryed() {
    // 此时vue实例已经被销毁了，vue实例上的data和methods等已经不可用了
    console.log("vue实例被销毁后");
    console.log(this.msg);
    this.show();
  }

我们在这里不能采用这种方法验证销毁，于是我们清空控制台，然后在vscode中【ctrl+c】停止项目来看：

 我们发现也是来不及打印的，于是在官网中，通过理解生命周期图，最终找的方法如下：

 

 

 说明：beforeDestory: vm实例被销毁前，此时data和methods等还可用

destoryed：vm实例已销毁, data和methods等所有属性都已经不可用。

---

 案例原代码：

vue的生命周期钩子函数详解源代码-Node.js文档类资源-CSDN下载