Vue声明周期图示

每个 Vue应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm =newVue({
// 选项
})

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

1.beforeCreate

vue实例对象或组件实例被创建,Vue对象数据观测 data数据对象 和 event事件, watcher对象开始初始化但尚未初始化完成时.

此时,vue实例内的对象均是undefined不可访问.

var vm =new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				beforeCreate:function() {

					console.log(this.$el);// undefinedconsole.log(this.$data);// undefinedconsole.log(this.msg);// undefined//可以在这加个开始loading,设置加载时的提示信息等//获取屏幕尺寸,设备信息,运行环境等信息
				}
			});

2.created

在实例创建完成后被立即调用。在这一步，数据观测 data event watcher 均已被创建。

var vm =new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				created:function() {

					console.log(this.$el);// undefinedconsole.log(this.$data);// objectconsole.log(this.msg);// hello world!//ajax获取数据,将获取到的数据赋值给 data或data中的对象
				}
			});

3.beforeMount

将vue实例挂在到dom对象之前.

vm.$el对象已创建,但未挂载到页面上.

此时获取到的dom对象中的指令尚未被计算.

var vm =new Vue({
				el: "#app",
				data: {
					msg: "hello world!"
				},
				beforeMount:function() {

					console.log(this.$el);//  virtual domconsole.log(this.$data);// objectconsole.log(this.msg);// hello world!//此时还无法通过document.getElementById等函数获取dom对象.
				}
			});

4.mounter

在原dom对象被vue创建的vm.$el替换到页面上之后.此时页面上才会存在相对于的dom节点.

一般理解为dom对象创建完毕.

// jQuery
			$(document).ready(function() {
//ready
			});

// vuevar vm =new Vue({
				el: "#app",
				mounted:function() {
//readyconsole.log(this.$el);// javascript domconsole.log(this.$data);// objectconsole.log(this.msg);// hello world!//在这里可以配合一些 页面加载完毕后的 处理.//例如: iSlider.js,fancybox.js 等插件初始化.
				}
			})