Vue 生命周期（钩子函数）

生命周期

实例生命周期钩子

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

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

<div id="app">
    {{ msg }}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hi vue'
        },
        // 在实例初始化之后，数据观测（data observer）和 event/watcher事件配置之前调用；
        beforeCreate: function () {
            console.log('beforeCreate')
        },
        /* 在实例创建完成后立即调用
        在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的用算，watch/event事件的回调。
        然而挂载的阶段还没开始，$el 属性目前不可见
        */
        created: function () {
            console.log('created')
        },
        // 在挂载开始之前调用：相关渲染的函数首次被调用
        beforeMount: function () {
            console.log('beforeMount')
        },
        // el 被创建的vm.$el替换，挂载成功
        mounted: function () {
            console.log('mounted')
        },
        // 数据更新时调用
        beforeUpdate: function () {
            console.log('beforeUpdate')
        },
        // 组件dom已经更新， 组件更新完毕
        updated: function () {
            console.log('updated')
        }
    });

    // 设置过期时间
    setTimeout(function () {
        vm.$data.msg = "change ....."
    }, 3000);
</script>

生命周期更多参数查看：https://cn.vuejs.org/v2/api/#beforeCreate

生命周期方法

beforeCreate

• 类型：Function

• 详细：

  在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• 参考：生命周期图示

created

• 类型：Function

• 详细：

  在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

  发送ajax 实现数据驱动视图

• 参考：生命周期图示

beforeMount

• 类型：Function

• 详细：

  在挂载开始之前被调用：相关的 render 函数首次被调用。

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示

mounted

• 类型：Function

• 详细：

  el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

  • 虚拟dom Recat

  • 获取真实DOM

  注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

  mounted: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
    })
  }

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示

beforeUpdate

• 类型：Function

• 详细：

  数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

  该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

• 参考：生命周期图示

updated

• 类型：Function

• 详细：

  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

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

  注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

  updated: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been re-rendered
    })
  }

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示

activated

• 类型：Function

• 详细：

  keep-alive 组件激活时调用。

  该钩子在服务器端渲染期间不被调用。

• 参考：

  • 构建组件 - keep-alive
  • 动态组件 - keep-alive

  keep-alive 让组件产生缓存

deactivated

• 类型：Function

• 详细：

  keep-alive 组件停用时调用。

  该钩子在服务器端渲染期间不被调用。

• 参考：

  • 构建组件 - keep-alive
  • 动态组件 - keep-alive

beforeDestroy

• 类型：Function

• 详细：

  实例销毁之前调用。在这一步，实例仍然完全可用。

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示

destroyed

• 类型：Function

• 详细：

  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

  关闭定时器

  该钩子在服务器端渲染期间不被调用。

• 参考：生命周期图示

errorCaptured

• 类型：(err: Error, vm: Component, info: string) => ?boolean

• 详细：

  当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

  你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。

  错误传播规则

  • 默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
  • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
  • 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。
  • 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

使用生命周期(钩子函数)

beforeCreate(){

    // 组件创建之前

    console.log(this.msg);

},

created(){

    // 组件创建之后

    // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响  应用：发送ajax请求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},

beforeMount(){

    // 装载数据到DOM之前会调用

    console.log(document.getElementById('app'));

},

mounted(){

    // 这个地方可以操作DOM

    // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM

    console.log(document.getElementById('app'));

},

beforeUpdate(){

    // 在更新之前，调用此钩子，应用：获取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新之前，调用此钩子，应用：获取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},

beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},

activated(){

    console.log('组件被激活了');

},

deactivated(){

    console.log('组件被停用了');

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>

<script src="../vue.js"></script>
<script>

    let Test = {
        data: function () {
            return {
                msg: 'alex',
                count: 0,
                timer: null
            }
        },
        template: `
            <div>
                <p>{{ count }}</p>
                <div id="box">{{ msg }}</div>
                <button v-on:click="changeHandler">修改</button>
            </div>
        `,
        methods: {
            changeHandler: function () {
                this.msg = 'wusir';
                document.querySelector('#box').style.backgroundColor('red')
            }
        },
        beforeCreate() {
            // 组件创建之前
            console.log('组件创建之前', this.msg);
        },

        created() {
            // 重要****
            // 组件创建之后
            // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响  应用：发送ajax请求
            console.log('组件创建之后', this.msg);
            this.timer = setInterval(() => {
                this.count++
            }, 1000);
            // this.msg = '嘿嘿黑';
        },
        beforeMount() {
            // 装载数据到DOM之前会调用
            console.log(document.getElementById('app'));
        },

        mounted() {
            // 这个地方可以操作DOM
            // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
            console.log(document.getElementById('app'));
        },

        beforeUpdate() {
            // 在更新之前，调用此钩子，应用：获取原始的DOM
            console.log(document.getElementById('app').innerHTML);
        },

        updated() {
            // 在更新之前，调用此钩子，应用：获取最新的DOM
            console.log(document.getElementById('app').innerHTML);
        },
        beforeDestroy() {
            console.log('beforeDestroy');
        },

        destroyed() {
            // 定时器的消耗在此方法处理 关闭清楚
            console.log('destroyed',this.timer);
            clearInterval(this.timer);
        },

        activated() {
            console.log('组件被激活了');
        },

        deactivated() {
            console.log('组件被停用了');
        }
    };

    let App = {
        data: function () {
            return {
                isShow: true
            }
        },
        template: `
            <div>
                 <keep-alive>
                    <Test v-if="isShow"/>
                </keep-alive>
                <button @click="clickRemove">改变test组件的生死</button>
            </div>
        `,
        methods: {
            clickRemove: function () {
                this.isShow = !this.isShow
            }
        },
        components: {
            Test
        }
    };

    let vm = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        components: {
            App
        }
    })
</script>
</body>
</html>