Web App开发--Vue生命周期与生命钩子

Vue实例

---

构造器

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var vm = new Vue({
  // 选项
})

Vue实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 。
其它的钩子，在实例生命周期的不同阶段调用，如mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

生命周期示意图

---

image

<br />

生命钩子的用法

---

从上面的图片中可直到，Vue实例的生命钩子有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroy。
另外，Vue的构造器还有其它的选项，如el、data、computed、watch和methods等。
创建一个Vue实例如下，不过一般用不上全部的构造器选项：

new Vue({
    el: "#app",  
    data: {
        var1: xxx,
        var2: {
            innerVar1: xxx,
            innerVar2: xxx,
            innerVar3: xxx
        }
    },
    computed: {
        sumOfVar2: function() {
            return (this.var2.innerVar1 + this.var2.innerVar2 + this.var2.innerVar3);
        }
    },
    watch: {
         'var1': function() {
         },
        'var2.innerVar1': function() {          
        },
        'var2.innerVar2': function() {  
        },
        'var2.innerVar3': function() {  
        }   
    },
    methods: {
        func1: function() {
        },
        func2: function() {
        },
        func3: function() {
        }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    beforeMount: function () {
    },
    mounted: function() {
    },
    beforeUpdate: function () {
    },
    updated: function () {
    },
    beforeDestroy: function() {
    },
    destroyed: function() {
    }
});

我本人用的最多的是mounted和updated。

mounted在Vue实例挂载到Dom上执行，这个阶段网页还在加载。而且从页面开始加载到加载完成，mounted只执行一次。因此，不要在mounted中执行一些耗时的操作，否则会导致页面的加载速度变慢。mounted适合做一些数据和界面的初始化操作。

由于mounted时实例已经挂载到Dom上，所以这是可以对元素节点进行一些操作。但如果某个元素节点用了v-if控制切换显示，而且初始时v-if的条件为假，则Dom上就没有该元素节点。这时即使在mounted中也获取不到该元素节点。

updated在每次数据更新时都会执行。数据更新后可以在这里进行一些后续的操作。

上一篇： Web App开发--vue.js入门与实践
下一篇： Web App开发--Vue组件化应用构建