vue的生命周期

什么叫做vue生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是我们说的vue的生命周期！

在这些生命周期的钩子中，都是在vue实例创建之后才定义的。而this指向的都是vue实例。
需要注意的是beforeUpdate钩子的时间段是在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，但切记不是访问this.$data中的数据。updated这个钩子在调用的时候，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

生命周期钩子的介绍

在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 底下这张图片是vue官方文档给出的一副有关生命周期中钩子函数的先后顺序图！所有的钩子函数会将this上下文绑定到vue实例中，所以可以访问数据！这也就意味着不能使用箭头函数定义一个钩子函数的方法！

这段代码是我在自己电脑上做的有关钩子函数执行先后顺序的一个实验，旁边也有着有关的注释！

  var App = {
            template: `<div>
             我是子组件
            </div>`,

            beforeDestroy: function() {
                console.log('beforeDstroy');
            },
            destroyed: function() {
                console.log('Dstroyed');
            },
            activated: function() {
                console.log('组件被激活了')
            },
            deactivated: function() {
                console.log('组件被停用')
            }


        }
        new Vue({
            el: '.s',
            components: {
                app: App
            },
            data: function() {
                return {
                    title: 'renjialeishiwoge',
                    isExist: true
                }
            },
            //在这里我们可以得出结论，只要局部组件在父组件中引入，其引入的数据为父组件中的数据！
            //对于项目中不停的使用v-if添加和删除的组件我们可以通过<keep-alive></keep-alive>将其包裹起来，激活和停用，提高整体的效率！
            template: `<div>
            <keep-alive>
           <app v-if="isExist"></app>
           </keep-alive>
            <button @click='destroy()'>事关子组件的生死</button>
            {{title}}
            <button @click='change()'>改变元素</button>
           </div>
            `,
            methods: {
                change: function() {
                    this.title = 'woshinibaba'
                },
                destroy: function() {
                    this.isExist = !this.isExist;
                }
            },
            //组件创建之前触发
            /*  beforeCreate: function() {
                 console.log(this.title);
             }, */
            //组件创建之后，并且可以在这里更改数据，实现vue->页面的更新
            /*  created: function() {
                 console.log(this.title);
                 this.title = 'woyijinggaibianl';
             }, */
            //vue中数据装载之前，执行
            /*  beforeMount: function() {
                 console.log(document.body.innerHTML);
             }, */
            //数据装载之后执行
            /*  mounted: function() {
                 console.log(document.body.innerHTML);
             },
             beforeUpdate: function() {
                 console.log(document.body.innerHTML);
             }, */
            /*    beforeUpdate: function() {
                   console.log(document.body.innerHTML);
               },
               updated: function() {
                   console.log(document.body.innerHTML);
               } */
  })