https://cn.vuejs.org/v2/guide/instance.html

生命周期图示：https://img-blog.csdnimg.cn/20191203114644314.png 

1. vue对象的生命周期
  1). 初始化显示（一次）
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态（多次）this.xxx = value
    * beforeUpdate()
    * updated()
  3). 销毁vue实例 （一次） vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器

初始化 只执行一次  

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        beforeCreate() {
            console.log('beforeCreate()')
        },
        created() {
            console.log('created()')
        }, beforeMount() {
            console.log('beforeMount()')
        },
        mounted() {
            console.log('mounted()')
        }
    })
</script>

更新操作 执行多次

跟新操作需要和DOM联系起来，不然是没有效果的 

<div id="test">
    <button @click="updateMsg">updateMsg</button>
    <!--需要在界面显示-->
    <div ref='msg'>{{msg}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            msg: ""
        },
        beforeUpdate() {
            console.log('beforeUpdate() ' + this.$refs.msg.innerHTML)
        },
        updated() {
            console.log('updated() ' + this.$refs.msg.innerHTML)
        },
        methods: {
            updateMsg() {
                this.msg = Math.random() * 1000 | 0
            }
        }
    })
</script>

 销毁操作 只执行一次  

<div id="test">
    <button @click="destroyVue">destroyed Vue</button>
    <!--msg依然还在界面上显示，只是Vue对象已经不在管理了-->
    <div ref='msg'>{{msg}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            msg: 666
        },
        mounted() {
            this.intervalId = setInterval(() => {
                console.log('异步任务 run run run...' + this.msg)
                this.msg = Math.random() * 1000 | 0
                this.isShow = !this.isShow
            }, 1000)
        },
        beforeDestroy() {
            console.log('beforeDestroy()')
            // 执行收尾的工作(不然程序还会一直执行)
            clearInterval(this.intervalId)
        },
        destroyed() {
            console.log('destroyed()')
        },
        methods: {
            destroyVue() {
                // clearInterval(this.intervalId)
                this.$destroy()
            }
        }
    })
</script>

<div id="test">
    <button @click="destroyVue">destroyed Vue</button>
    <div ref='msg'>{{msg}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            msg: 666
        },
        beforeCreate() {
            console.log('\t\t\tbeforeCreate()')
        },
        created() {
            console.log('\t\t\tcreated()')
        },
        beforeMount() {
            console.log('\t\t\tbeforeMount()')
        },
        mounted() {
            console.log('\t\t\tmounted()')
            this.intervalId = setInterval(() => {
                console.log('异步任务 run run run...' + this.msg)
                this.msg = Math.random() * 1000 | 0
            }, 1000)
        },

        beforeUpdate() {
            console.log('beforeUpdate()')
        },
        updated() {
            console.log('updated()')
        },

        beforeDestroy() {
            console.log('\t\t\tbeforeDestroy()')
        },
        destroyed() {
            console.log('\t\t\tdestroyed()')
        },
        methods: {
            destroyVue() {
                clearInterval(this.intervalId)
                this.$destroy()
            }
        }
    })
</script>