创建阶段的第2个生命周期函数，组件的props，methods，data已创建好，可以使用，但组件的模板结构尚未生成 ，不能操作DOM，！！！但最早可以发起Ajax请求

经常通过created函数调用methods中的方法，请求服务器的数据，并且把请求到的数据转存到data中，供template模板渲染时去使用

创建阶段的第3个生命周期函数,内存编译好的HTML结构准备渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构，无法操作DOM

创建阶段的第4个生命周期函数，已经渲染内存的HTML结构到浏览器中，包含了当前组件的DOM结构，

！！！最早可以操作DOM

运行阶段的第1个生命周期函数，将要根据数据变化后、最新的数据，重新渲染组件的模板结构，此时数据变化后还未放到模板结构上

运行阶段的第2个生命周期函数，完成了最新数据重新渲染到组件的DOM结构

 !!!当数据变化后，为了能够操作到最新的DOM结构,应将代码写在update中

2.destroyed

销毁阶段的第2个生命周期函数

<template>
  <div class="test-container">
      <h3 id="myh3">Test.vue组件  ----{{books.length }}本图书</h3>
      <p id="pppp">message的值是：{{message}}</p>
      <button @click="message+='迪丽热巴'">修改message的值</button>
  </div>
</template>

<script>
export default {
    props:['info'],
    data(){
        return{
            message:'hello vue.js!',
            /* 定义books数组，存储的是所有图书列表数据，默认为空数组 */
            books:[]
        }
    },
    methods:{
        show(){
            console.log('调用了Test组件的show方法！');
        },
        /* 使用Ajax请求图书列表的数据 */
        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()
        }
    },
    /* 创建阶段的第1个生命周期函数,
    组件的props，methods，data
    尚未被创建，处于不可用 */
    beforeCreate() {
        /* console.log(this.info);
        console.log(this.message);
        this.show() */
    },
   
   /* 创建阶段的第2个生命周期函数
    组件的props，methods，data已创建好
    可以使用，但组件的模板结构尚未生成
    ，不能操作DOM，
    ！！！但最早可以发起Ajax请求
     */
    created() {
       /*created生命周期函数  
       经常通过created函数调用methods中的方法，
       请求服务器的数据，并且把请求到的数据转存到data中
       供template模板渲染时去使用 */
    /* console.log(this.info);
        console.log(this.message);
        this.show() */
        this.initBookList()
        
    },
    
    /* 创建阶段的第3个生命周期函数,
    内存编译好的HTML结构准备渲染到浏览器中
    此时浏览器中还没有当前组件的DOM结构
    无法操作DOM */
    beforeMount(){
        /* console.log('beforeMount');
        const dom=document.querySelector('#myh3')
        console.log(dom); */
    },

    /* 创建阶段的第4个生命周期函数
    已经渲染内存的HTML结构到浏览器中
    包含了当前组件的DOM结构，
    ！！！最早可以操作DOM */
    mounted() {
    //   console.log(this.$el);  
     const dom=document.querySelector('#myh3')
        console.log(dom);
    },

    /* 运行阶段的第1个生命周期函数
    将要根据数据变化后、最新的数据，重新渲染组件的
    模板结构，此时数据变化后还未放到模板结构上 */
    beforeUpdate(){
      /*   console.log('beforeUpdate');
        console.log(this.message);
        const dom=document.querySelector('#pppp')
        console.log(dom.innerHTML); */
    },
    
    /* 运行阶段的第2个生命周期函数,
    完成了最新数据重新渲染到组件的DOM结构
    !!!当数据变化后，为了能够操作到最新的DOM结构,
    应将代码写在update中 */
    updated() {
          console.log('beforeUpdate');
        console.log(this.message);
        const dom=document.querySelector('#pppp')
        console.log(dom.innerHTML);
    },


    /* 销毁阶段的第1个生命周期函数
    组件还处于正常工作状态 */
    beforeDestroy(){
        console.log('beforeDestroy');
        console.log(this.message);
    },

    /* 销毁阶段的第2个生命周期函数 */
    destroyed() {
        
    },

}
</script>

<style lang="less" scoped>
test-container{
    background-color: pink;
    height: 200px;
}

</style>