VUE-生命周期钩子

一、VUE-生命周期钩子链接

二、

beforeCreate() {
    // 页面初始化之前
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
    console.log('beforeCreate', this.$data)
  },
  created() {
    // 数据和方法初始化
    // 在实例创建完成后被立即调用。
    // 在这一步，实例已完成以下的配置：数据观测(data observer) ，属性和方法的运算，watch/event 事件回调。
    // 然而，挂载阶段还没开始，$el 属性不可见
    console.log('created', this.$data, this.$el)
  },
  beforeMount() {
    // 不常用
    // 在挂载开始之前被调用：相关的渲染函数首次被调用
    console.log('beforeMount', this.$data, this.$el)
  },
  mounted() {
    // DOM 结构页面初始化完毕，
    // el 被新建的vm.$el替换，挂载成功
    console.log('mounted', this.$data, this.$el)
  },
  beforeUpdate() {
    // 不常用
    // 数据更新时调用
    console.log('beforeUpdate')
  },
  updated() {
    // 页面更新
    // 组件DOM已经更新，组件更新完毕
    console.log('updated', this.values)
  },
  destroyed() {
    console.log('destroyed',)
  },

三、图示