每个Vue实例在创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在适当的时候进行我们的业务逻辑处理。在JQueryz中，有一个很明显的前置钩子：ready()方法。
$(document).ready(function() { // })同样，在Vue里也有各种生命周期钩子，常见的有以下三个：
created：vue实例创建完成之后会调用，此阶段时$el变量还不可用；当我们需要初始化一些数据时会比较有用mounted：$el挂载到实例上之后调用，一般我们的第一个业务逻辑会写在这里beforeDestroy：实例销毁之前调用，相当于前置钩子，主要进行一些资源释放、解绑操作除了上面列出的三个钩子函数之外，还有其他的一些钩子函数，后期我们会再补充，下面上代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue生命周期学习</title> </head> <body> <div id="app1"> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> var app = new Vue({ el : "#app1", data : { }, created : function () { //这个时候$el变量尚不可用,打印的是null console.log(this.$el); alert("this is created function"); console.log("created function called"); }, mounted : function () { //这个时候$el变量可用,对应的就是#app1 console.log(this.$el); console.log("mounted function callded"); alert("mounted function callded"); }, beforeDestory : function() { console.log("beforeDestory function callded"); alert("beforeDestory function callded"); } }); </script> </body> </html>从上面的console log中我们可以看到上面三个钩子函数的调用顺序。
另外，对于vue实例，可以使用通过实例变量访问其属性值，例如上面的this.$el（this是指的当前vue实例）。
Vue学习系列 -- 基础知识了解
Vue学习系列 -- 常见事件/指令学习
Vue学习系列 -- 计算属性
