VUE生命周期

1、beforeCreate执行时：data和el均未初始化，值为undefined

2、created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到app.message的值，但Vue 实例使用的根 DOM 元素el还未初始化

3、beforeMount执行时：data和el均已经初始化，但从{{message}}等现象可以看出此时el并没有渲染进数据，el的值为“虚拟”的元素节点

4、mounted执行时：此时el已经渲染完成并挂载到实例上

5、beforeUpdate：数据改变之后，模板解析替换之前，这里的模板还没有完成视图更新

6、updated：数据改变之后，模板解析替换已完成，已经是数据更新之后的最新模板视图了

7、 beforeDestroy和destroyed：实例销毁之后做一些收尾工作，例如清除在实例运行期间开启的定时器

8、methods 一般放点击事件

<template>
  <div class="second">
     <div @click='handleBtnDestory'>{{content}}</div>
  </div>
</template>
<script>

export default {
   name: 'Second',
    data () {
       return {
          content:'点击hello world',
       }
    },
    methods:{
        handleBtnDestory:function() {
            this.content="I'm changed";//用来测试updata的生命周期函数
        }
    },
    beforeCreate:function() {
        console.log("beforeCreate");
    },
    created:function() {
        console.log("created");
    },
    beforeMount:function() {
        console.log(this.$el); //输出结果是<div id="app"></div>
        console.log("beforeMount");
    },
    mounted:function() {
        console.log(this.$el); //输出结果是<div id="app">hello world</div>
        console.log("mounted");
    },
    beforeDestroy:function() {
        console.log("beforeDestroy");
    },
    destroyed:function() {
        console.log("destroyed");
    },
    beforeUpdate:function() {
        console.log("beforeUpdate");
    },
    updated:function() {
        console.log("updated");
    }
}
</script>
<style>
.second{
  color:#f00;
  font-size:40px;
}
</style>