vue生命周期简介及钩子函数

组件的生命周期

1. 生命周期&生命周期函数

   生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

   注意：生命周期强调的是 时间段，生命周期函数强调的是 时间点

2. 组件生命周期函数的分类

参考vue官方文档给出的"生命周期图示"：https://cn.vuejs.org/v2/guide/instance.html

三个重要的生命周期函数

//最早能发起ajax的生命周期函数
created() {
   // created 生命周期函数，非常常用。
   // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
   // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
   this.initBookList() //initBookList使用 Ajax 请求图书列表的数据
},
// 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行
mounted() {
   // console.log(this.$el)
   // const dom = document.querySelector('#myh3')
   // console.log(dom)
},
// 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
updated() {
   // console.log('updated')
   // console.log(this.message)
   // const dom = document.querySelector('#pppp')
   // console.log(dom.innerHTML)
},

参考资料