-
beforeCreate
实例初始化之后,立即同步调用。在数据观测,watch/event事件之前调用 -
created
实例创建完成后被调用,完成以下配置:数据观测,属性和方法的运算,watch/event事件回调 -
beforeMount 该钩子在服务器端渲染期间不被调用。
挂载开始之前被调用,相关渲染函数render开始被调用 -
mounted
挂载成功,el属性被vm.$el替代,服务器端渲染期间不被调用 -
beforeUpdate
在dom被patch之前调用数据修改 -
updated
由于数据更改导致虚拟的dom重新渲染,在这之后会调用该钩子 -
beforeDestroy
实例销毁前调用。在这一步,实例仍然完全可用 -
destroyed
实例销毁后被调用。调用后,对应的所有指令都被解绑,所有的事件监听器都被移除,所有的子实例也都被销毁
<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('vue初始化后,进行数据观测');
},
/* 在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
然而,挂载阶段还没开始,$el 属性目前不可见。 */
created :function(){
console.log('vue实例创建完成,被调用');
},
//在挂载开始之前被调用:相关的渲染函数首次被调用
beforeMount : function(){
console.log('挂载开始前,调用相关的渲染函数');
},
//el 被新创建的 vm.$el 替换, 挂载成功
mounted : function(){
//console.log($data.value);
//console.log(vm.$data.value);
console.log('挂载成功');
},
//数据更新时调用
beforeUpdate : function(){
console.log('数据更新前调用');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('vue加载完毕');
},
data:{
value:"23",
msg:"77"
}
});