Vue生命周期

生命周期函数

【这些函数并不放在methods这个对象里,而是单独放在Vue实例里】
Vue实例在某一个时间点自动执行的函数
初始化

  1. 初始化事件,和生命周期相关的内容
    当Vue最基础的初始化完成后自动调用beforeCreate【生命周期函数】
  2. Vue 处理外部注入和双向绑定相关的内容
    当这部分初始化完成后,Vue实例的初始化操作都完成了,会自动执行Created【生命周期函数】
    是否有el选项
    是否有template组件
    1. 有就用模板渲染
    2. 没有就把el的外部HTML当作模板
      自动执行beforeMount生命周期函数【生命周期函数】
  3. 模板结合数据生成的最终Vue实例里的dom元素会被挂载到页面之上(内容显示到页面之上了)
    页面挂载之后,mounted函数被自动执行【生命周期函数】在这里插入图片描述
  4. 当数据发生改变,还没有重新渲染之前,会自动执行beforeUpdate
  5. 当重新渲染之后,updated这个生命钩子会被执行
  6. 在组件即将被销毁时,beforeDestory会被执行
  7. 当组件被完全销毁的时候,destoryed函数会被执行

Vue生命周期_第1张图片
Vue生命周期_第2张图片Vue生命周期_第3张图片

你可能感兴趣的:(前端学习)