关于vue.js中created方法的使用

技术概述

created是一个生命周期的钩子函数。在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。本文将探讨created在使用过程中遇到的一些问题。

技术详述

关于生命周期，用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。而created则是一个生命周期的钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。一般可以在created函数中调用ajax获取页面初始化所需的数据。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：

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

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

技术使用中遇到的问题和解决过程

mounted和created的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用:

var ctx = document.getElementById(ID);

在软件工程实践开发的过程中，发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么在此时果断选择mounted。

总结

通过了解created和mounted的区别，对生命周期钩子有了一个更全面的了解。同时也锻炼了编写vue相关程序的能力。

参考链接：

• 生命周期钩子 | Vue.js
• Vue进阶（三十六）：vue.js中created方法的使用详解