vue-生命周期函数

一、生命周期的含义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期图示：

vue生命周期.jpg

二、生命周期的过程

生命周期钩子的 this 上下文指向调用它的 Vue 实例。
注意：在生命周期函数中不要使用箭头函数

1、beforeCreate 创建之前(数据初始化之前)

beforeCreate生命周期函数，一般在开发中很少使用，除非要设置Vue实例的内容。
在beforeCreate的时候，Vue实例身上的数据还没有初始化完成。
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

// 创建之前（数据初始化之前）
  

2、created 数据初始化完成

（1）created 生命周期函数
在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
created 生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里

            // 创建完成（数据初始化完成）
            created(){ 
                console.log('-------------created----------');
                // 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
                console.log(this);
                console.log(this.name+''+this.age);
            },
       })

（2）el选项和template选项
el的使用：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用vm.mount() 手动开启编译。
template的使用：
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。如果 Vue 选项中包含渲染函数，该模板将被忽略。

    

        
{{name}}
        
{{age}}
    

通过vue实例的mount方法的好处是，可以自行选择挂载的时机

3、beforeMount 挂载之前

模板已经成功渲染，但是还没有将内容挂载到页面中。
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

beforeMount() {
                console.log('----------beforeMount----------');
                //这个生命周期函数，基本用不上
                console.log(this.$el);
               //可以修改数据，但是内容没有挂载到页面，并且后续内容会被真正的数据替换掉。
                document.querySelector('#name').innerHTML = '哈哈'
            },

4、mounted 挂载完成

mounted 生命周期函数，通常用于对DOM的重新改动
模板已经渲染成功，并且已经将内容挂载到了页面中

mounted() {
                console.log('------------mounted-----------')
                // 这个生命周期，通常用于对DOM的重新改动
                console.log(this.$el);
               //可以修改数据，并且重新渲染到页面
                document.querySelector('#name').innerHTML = '呵呵'
            },

5、beforeUpdate 数据更新之前

数据已经改了，只是还没有重新挂载页面

        
{{name}}
        
{{age}}
        修改姓名
        修改年龄
    

beforeUpdate() {
                console.log('-------------beforeUpdate----------');
                console.log(this.name+''+this.age);
                console.log(this.$el);
            },

6、updated 数据更新完成

数据已经改了，且已经挂载到页面
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watch 取而代之。

        // 修改完成（数据已经改了，且已经挂载到页面）
        updated() {
                console.log('-------------updated----------');
                console.log(this.name+''+this.age);
                console.log(this.$el);             
         },

7、beforeDestroy 销毁之前

在beforeDestroy阶段，对数据做任何的修改，都不会重新渲染到页面。该阶段，实例仍然完全可用，我们通常会在这个生命周期函数中做一些收尾的工作。 比如：停掉开启的定时器，初始化一些数据等等。

        
{{name}}
        
{{age}}
        
        不过了
    

beforeDestroy() {
                console.log('-------------beforeDestroy----------');
                // 这个生命周期函数，会用的多一些
                console.log(this);
                // 对数据做任何的修改，都不会重新渲染到页面
                this.name = "王五"
            },

8、destroyed 销毁完成

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
destroyed 生命周期基本不用

        
{{name}}
        
{{age}}
        
        不过了