vue生命周期(beforecreate,create,beforemounted,mounted)

代码

var vm = new Vue({
el: “#container”,
data: {
test : ‘hello world’
},
beforeCreate: function(){
showData(‘创建vue实例前’,this);
},
created: function(){
showData(‘创建vue实例后’,this);
},
beforeMount:function(){
showData(‘挂载到dom前’,this);
},
mounted: function(){
showData(‘挂载到dom后’,this);
},
beforeUpdate:function(){
showData(‘数据变化更新前’,this);
},
updated:function(){
showData(‘数据变化更新后’,this);
},
beforeDestroy:function(){
vm.test =“3333”;
showData(‘vue实例销毁前’,this);
},
destroyed:function(){
showData(‘vue实例销毁后’,this);
}

});

function realDom(){
console.log(‘真实dom结构：’ + document.getElementById(‘container’).innerHTML);
}
function showData(process,obj){
console.log(process);
console.log(‘data 数据：’ + obj.test)
console.log(‘挂载的对象：’)
console.log(obj.$el)
realDom();
console.log(’------------------’)
console.log(’------------------’)
}

分析过程：

beforecreate:啥都没有
创建vue实例前：
data 数据：undefined
挂载的对象：
undefined
真实dom结构：

test

---

---

create:只有data
创建vue实例后：
data 数据：hello world
挂载的对象：
undefined
真实dom结构：

test

---

---

beforemounted:有个div
挂载到dom前:
data 数据：hello world
挂载的对象：

...

真实dom结构：

test

---

---

mounted:div中有数据
挂载到dom后：
data 数据：hello world
挂载的对象：

...

真实dom结构：

hello world

---

---