<comment>
    # 生命周期
</comment>
<template>
    <div class="lifeDoc">
      <h1 class="h1title">
        {{titles[0].title}}
      </h1>
      <img :src="url">

      <h1 class="h1title">
        {{titles[1].title}}
      </h1>
      <div class="code">
        <p>beforeCreate（新对象诞生）</p>
        <p>created （具有默认特性的对象）</p>
        <p>beforeMounted（对象在DOM中适合形状）</p>
        <p>mounted（DOM已准备就绪并放置在页面内）</p>
        <p>beforeUpdate（更改已完成，但尚未准备好更新DOM）</p>
        <p>updated（在DOM中呈现的更改）</p>
        <p>beforeDestroy（对象准备死掉）</p>
        <p>destroyed （对象停止并从内存中删除）</p>
      </div>
    </div>

</template>

<script>
  import imgOne from '../../../static/lifeDoc/life.jpeg'
    export default {
        name: 'lifeDoc',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
        },
        data() {
            return {
              titles : [
                {
                  title : '生命周期图'
                },
                {
                  title : '执行顺序'
                },
                {
                  title : '相关资料'
                }
              ],
              url: imgOne
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {},
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style  scoped>
  .h1title{
    margin-left: 1rem;
    margin-bottom: 1rem;
    /*文字不能被选中*/
    user-select: none
  }
</style>
