Vue 实例简单的一生 生命周期(易理解)

1.生命周期是什么?

生命周期用于监听每个相应阶段

1. vue实例的创建==>挂载==>更新==>结束销毁的每个阶段
2. 生命周期常用的共有8个阶段
3. 当Dom渲染到某一周期的时候,
   会进行自动调用当前周期内部的方法
4. 用我们的话来说,生命周期就是在vue的相应阶段内自动执行其内部的方法和代码
5. 严格区分大小写,注意其驼峰命名法

2.生命周期怎么用?

八个常用周期:

beforeCreate 创建之前
created 创建完成

beforeMount 挂载之前
mounted 挂载完成

---

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

---

beforeUpdate 更新之前
updated 更新完成

beforeDestroy 销毁之前
destroyed销毁之后

写在vue内部

let App = new Vue({
  beforeCreate(){
    console.log('我在vue实例创建之前自动执行');
  },
  created(){
    console.log('我在vue实例创建完成后自动执行');
  },
  
  beforeMount(){
    console.log('我在挂载之前自动执行');
  },
  mounted(){
    console.log('我在挂载完成后自动执行');
  }
})
  

或者在暴露出的js代码中使用

export default {
  beforeUpdate(){
    console.log('我在vue数据更新之前自动执行');
  },
  updated(){
    console.log('我在数据更新完成后自动执行');
  },
  
  beforeDestroy(){
    console.log('我在vue组件销毁之前自动执行');
  },
  destroyed(){
    console.log('我在vue组件销毁之后自动执行');
  }
}

3.生命周期在哪些地方使用?

当我们需要获取项目的数据

可以在生命周期的挂载后阶段写入

这样vue实例挂载完成的时候

就会自动执行内部的方法来获取数据

可用于查看某一个阶段的数据,以及做收尾工作,
例如清空定时器.

总结

生命周期的优点是可以自动执行,无需触发,方便快捷的去执行我们相应阶段内的代码