生命週期圖
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>靜態vue</title>
</head>
<body>
<div id="data">
<p>{{text}}</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#data',
data: {
text:"vue.test"
},
beforeCreate: function(){
console.log(this);
logData('創建vue實例前',this);
},
created: function(){
logData('創建vue實例後',this);
},
beforeMount:function(){
logData('掛載到dom前',this);
},
mounted: function(){
logData('掛載到dom後',this);
},
beforeUpdate:function(){
logData('數據變化更新前',this);
},
updated:function(){
logData('數據變化更新後',this);
},
beforeDestroy:function(){
vm.test ="vueDelete";
logData('vue實例銷燬前',this);
},
destroyed:function(){
logData('vue實例銷燬後',this);
}
});
function logDom(){
console.log('dom結構：' + document.getElementById('data').innerHTML);
}
function logData(process,obj){
console.log(process);
console.log('data數據：' + obj.test)
console.log('掛載對象：')
console.log(obj.$el)
logDom();
console.log('------------------')
}
</script>
1.初始化時的打印信息：
說明初始化時的方法調用順序爲：beforeCreate、created、beforeMount、mounted
2.修改數據時的打印信息：
說明數據變化時時的方法調用順序爲：beforeUpdate、updated
3.銷燬vue時的方法調用爲：beforeDestroy、destroyed