我们从官网上查看生命周期
    那么上面红色框的是生命周期，例如beforeCreate、create、beforemount、mounted等

    image.png

    上一节课程我们试用了mounted钩子函数，现在我们试用一个beforemounted

    beforeCreate状态：数据代理还未开始，也就是说我们的vm还没有_data，也不能访问method方法

    create状态: 数据代理已经开始，我们可以在实例vm中看到_data 和method了

    我们把以上两个钩子函数写一下

    补充一点：
    debugger；是打断点的意思哈

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5. </head>
    7. <body>
    8. <script type="text/javascript" src="./vue.js"> </script>
    10. <div id="app" >
    11.     <!-- style这里是一个特殊的写法-->
    12.     <h2 v-bind:style="{ color: redColor,opacity: opacity}">我的透明度是0.5</h2>
    13. </div>
    15. <script type="text/javascript">
    16.     var vm = new Vue({
    17.         el:"#app",
    18.         data:{
    19.             opacity:1 ,
    20.             redColor: 'red',
    21.             mycount : 1,
    22.         },
    23.         methods:{
    24.             adds(){
    25.                 this.mycount ++
    26.             }
    27.         },
    28.         beforeCreate(){
    29.             console.log("i am beforeCreate。。 ")
    30.             console.log(this)
    31.             //这里是断点
    32.             debugger;
    33.         },
    34.     })
    35. </script>
    36. </body>
    37. </html>

    如下结论：
    1）我们发现这个时候会在debbuger卡住
    2）这时候的this 是没有_data的
    3）这时候的this是没有 method里面的adds的
    image.png

    我们再加上created()函数那里打一个断点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
<script type="text/javascript" src="./vue.js"> </script>

<div id="app" >
    <!-- style这里是一个特殊的写法-->
    <h2 v-bind:style="{ color: redColor,opacity: opacity}">我的透明度是0.5</h2>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            opacity:1 ,
            redColor: 'red',
            mycount : 1,
        },
        methods:{
            adds(){
                this.mycount ++
            }
        },
        beforeCreate(){
            console.log("i am beforeCreate。。 ")
        },
        created(){
            console.log("i am create")
            console.log(this)
            debugger;

        }
    })
</script>
</body>
</html>

    查看结果：
    发现都有了
    image.png