vue的生命周期

生命周期就是事物产生到消亡的整个过程。

人类生命周期

我们人类的生命周期

 

 

我们的人生中有很多关键节点（时刻），比如出生，成年，结婚，去世等等。每个关键节点前和节点后都会有明显的变化。比如出生前我们还是胎儿，出生前我们就来到这个世界上了，我们就可以打预防针，体检了。

Vue3的生命周期

Vue生命周期的关键节点：有4关键节点分别是 create(创建)、 mount(挂载)、 update(更新)、 unmount(卸载)。
在每个关键节点前后我们如果设置了相应的钩子函数，那么到这个节点前或节点后就会调用相应的钩子函数。所以一共就可以设置8个钩子函数。

 

 

生命周期类比

生命周期的形象比喻：

• 挂载（初始化相关属性）
  • beforeCreate ---- 出生前
    注意点：在此时不能获取data中的数据，也就是说 this.info 得到的是null
  • created ---- 出生了 （这里就可以获取data中的数据）
  • beforeMount ---- 登记前
  • mounted ---- 登记后【页面加载完毕的时候就是此时】
    注意点：默认情况下，在组件的生命周期中只会触发一次
• 更新（元素或组件的变更操作）
  • beforeUpdate ---- 学习前
  • updated ---- 学习会了
    注意点：可以重复触发的
• 销毁（销毁相关属性）
  • beforeunMount ---- 交代后事
  • unmounted ---- 寿终正寝

复制const app = Vue.createApp({ // vue的配置项
  // 初始化数据
  data() {
    return { info: 'hello world' }, // 这里可以通过this指针访问到 this.info
  },
  // 下面生命周期钩子函数
  beforeCreate() {}, // 创建之前
  created() {}, // 已创建  (常用) 数据请求、计时器、延时器、订阅数据
  beforeMount() {},// 挂载之前
  mounted() {},// 已挂载  (常用) DOM操作
  beforeUpdate() {},// 更新之前
  updated() {},// 已更新 (常用) DOM操作
  beforeUnmount() {},// 卸载之前 (常用) 取消订阅，清除计时器、延时器等
  unmounted() {},// 已卸载
});

Vue2.x的区别

unmount -> destroy
beforeUnmount -> beforeDestroy // 销毁前
unmounted -> destroyed // 已销毁