每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。这是Vue官方说明,就好比人一样,你只有满了22岁(男)才能领结婚证结婚,满60岁后才可以领养老保险金,符合了一定条件,才能干某些事…
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue(
{
el:'#app',
data:{
message:"hi Vue"
},
//在实例初始化之后,数据观测(data observer)和event/wacther 事件配置之前被调用
//整个页面创建之前创建的生命周期
beforeCreate:function()
{
console.log("beforecreated!");
},
//在实例创建完成后被调用立即执行
//实例完成了数据观测(data observer),属性和方法运算,watcher/event事件回调
//此时还未挂载,$el属性不可见
created:function ()//created 钩子以用来在一个实例被创建之后执行代码:
{
console.log("created")
},
//在挂载开始前被调用,此时相关的渲染函数首次被调用
beforeMount:function()
{
console.log("beforeMount")
},
//el被创建的vm.el替换,挂载成功
mounted:function()
{console.log("Mounted")},
//数据更新时调用
beforeUpdate:function()
{
console.log("beforeUpdate")
},
//组件Dom更新完毕
update:function()
{
console.log("update")
}
}
);
setTimeout(function(){
vm.message = "changed";
},3000)
</script>
</body>
新人小菜鸡一枚,希望能帮到你!