Vue 生命週期

beforeCreate

$el, $data, DOM 都未载入此时会建立 Props，因此 Props 的 default & validation 是取不到 data/computed 的用途: 展示 Loading 画面勿在此 Call API ，无论 API 回应速度，该回应还是会在 created 才被处理，因还未有 $data 可以储存该资料server-side rendering 时会被呼叫

  el: '#app',  data(){ return { a: 123, } },  beforeCreate() {    console.log(this.a) // undefined    console.log('$data 载入前')  },

created

$el, DOM 都未载入，$data 已可使用用途: 初始化资料、AJAX Callserver-side rendering 时会被呼叫

  data(){ return { a: 123, } },  created() {    console.log(this.a) // 123 (data 可被取得)    console.log('$data 载入后，但 $el 还未载入')  },

beforeMount

$data 已载入 (此生命週期较少用到)server-side rendering 时 不会 被呼叫

  beforeMount() { console.log('还未挂载 DOM') },

mounted

$el, $data, DOM 皆载入用途: 渲染画面、挂载监听器server-side rendering 时 不会 被呼叫

  mounted() {     console.log('DOM 已可使用，在此做更动、渲染')   },

beforeUpdate

当 相依资料更新、或需重新渲染 时触发，在 DOM 重新渲染之前此时为 修改资料的最后时机用于 debugging 监控何时元件被重新渲染

  beforeUpdate() {     console.log('在此可以取得已更新的资料')    console.log('但新的 DOM 还未被渲染')   },

updated

当 相依资料更新、或需重新渲染 时触发，重新渲染 DOM 之后在此取得已更新的 DOM

  updated() { console.log('新的 DOM 已渲染完成') },

beforeDestroy

watchers / 子元件 / 事件监听 被摧毁之前此时 元件还是可以正常运行用途: 在此清除 事件监听、订阅资料

  beforeDestroy() { alert('你确定要删除') },

destroyed

不代表网页上渲染的元素会消失，只是该元素会与 Vue 实体脱钩，不再接收控制解除 watchers / 事件监听 / 清除子元件 之后可用来告知 伺服器，此元件已被清除

  destroyed() { console.log('该实例已被摧毁') },

参考资料

Understanding Vue.js LifeCycle Hooks详解vue生命週期