生命周期与生命周期函数

现在我们来了解一下vue实例的生命周期

const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {},
})

我们创建一个vue实例，一个vue实例，也分为三个阶段：创建阶段、运行阶段、销毁阶段

在实例运行的三个阶段中，总是伴随着各种各样的事件，称为：生命周期函数或者生命周期钩子或者生命周期事件，以上叫法都是可以的，首先：

1、创建阶段

创建阶段，也将其分为俩个步骤：

①beforecreate阶段，数据还没有开始运行，获取不到data和methods里面的函数或者方法。

在beforeCreate函数里面，值为undefined

   const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {},
            beforeCreate() {
                // vue刚刚开始创建
                console.log(this.list)
            },
})

②created阶段：已经可以获取data和methods里面的数据和方法了，开始创建阶段的最后一步

created() {
                // 已经可以获取data和methods里面的数据和方法了，开始创建阶段的最后一步
                console.log(this.list)
            },

2、运行阶段：获取到data数据，也将其分为两步：

①beforeMount阶段，还未将页面挂载到用户端口上，只是获取到了数据

②正在运行阶段：mounted阶段，其中分为两个阶段：

                ①、执行beforeUpdate函数，页面还是旧数据，但是，此时的data数据是最新的

                ②、updated函数阶段，输出的和页面上都是最新的内容

当数据发生改变时，mounted阶段：这个阶段页面就真正的开始渲染了此时，vm实例的创建阶段即将结束

 结论：如果要使用一些第三方的插件来操作dom元素，最好在这个阶段，因为此时，这个阶段已经是一个真正的页面了   

beforeMount() {
                console.log(this.list + "已经被调用了")
            },
mounted() {
                console.log("创建完毕了")
            },
beforeUpdate() {
 console.log("数据还未更新")

            },
updated() {
console.log("数据更新完毕")
            },

      3、 销毁实例的过程：

          ①、执行beforeDestroy函数：vm实例还没有开始销毁，还是可用状态

          ②、执行destroy函数：vm实例基本上就不可用了

最后：

结论：

         * 创建阶段的生命周期函数：一个实例只执行一次

         * 运行阶段的生命周期函数：一个实例可以根据data的改变与否，有选择性的执行0次到多次

         * 销毁阶段的生命周期函数：一个实例只执行一次

         * 在new Vue()中其实就做了很简单的一些步骤：

         * 1、先初始化了data和methods

         * 2、根据数据，在内存中渲染一棵dom树

         * 3、将渲染的dom树，挂载到页面上，显示给用户【此时，创建阶段结束】

         * 4、根据data的数据改变，有选择性的重新渲染dom树

         * 5、把重新渲染的dom树，再次挂载到页面上，从而保持data界面同步