vue ---- 生命周期

生命周期

生命周期：创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段。

生命周期函数： 是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行

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

1. 使用组件的时候就会创建一个实例对象，接下来会初始化事件和生命周期函数
2. beforeCreate : 该阶段什么都做不了
3. 初始化props,data,methods
4. created : 数据可用了，但组件的模板结构未生成，不能操作dom

   该阶段可以用于发起ajax请求获取数据,并将请求的数据放到data中

   data(){
       return{
         books: []
       }
     },
     methods: {
       initBookList(){
         const xhr = new XMLHttpRequest()
         xhr.addEventListener('load',() => {
           const result = JSON.parse(xhr.responseText)
           console.log(result)
           this.books = result.data
         })
         xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
         xhr.send()
       }
     },
     created() {
       this.initBookList();
     }
   

5. 编译HTML结构
6. beforeMount : 还没有dom结构，该函数很少用
7. 将内存中的HTML结构，替换掉el指定的dom
8. mounted： 可以操作dom结构了
9. beforeupdate: 当数据发生变化时被触发，数据是最新的，结构还未渲染
10. 根据最新的结构重新渲染dom结构
11. updated: 数据和结构都是最新的
12. beforeDestory： 将要销毁组件
13. destory: 已销毁