完整原文地址見簡書http://www.reibang.com/p/8fa37a3c8e6e
createApp()、mount()、MVVM测蘑、根組件實(shí)例
-【createApp()】
Vue.createApp()灌危，創(chuàng)建Vue應(yīng)用實(shí)例，開始使用Vue碳胳；
-【mount()】
.mount()指定在哪個(gè)組件上使用Vue
（這個(gè)在《Vue3 | 基本特性概念 與語法的 應(yīng)用與案例》中已經(jīng)講過了）勇蝙；
-傳入createApp()的參數(shù)，描述了這個(gè)Vue應(yīng)用實(shí)例的展示內(nèi)容固逗，包括數(shù)據(jù)浅蚪、UI、各種事件等烫罩；
-【MVVM】
我們說Vue架構(gòu)使用了MVVM的設(shè)計(jì)思想，其中data()是M層洽故，template是V層贝攒，
VM層視圖數(shù)據(jù)連接層，由Vue組件幫我們完成时甚；
-【Vue應(yīng)用實(shí)例的根組件實(shí)例】
以下代碼中隘弊，const vm = heheApp.mount('#root_div');這里，
vm接收的組件實(shí)例荒适，就是這個(gè)Vue應(yīng)用實(shí)例的根組件梨熙；
我們可以使用這個(gè)根組件實(shí)例訪問到組件內(nèi)相關(guān)的 數(shù)據(jù)（data）等字段（詳見下面案例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root_div"></div>
</body>
<script>
const heheApp = Vue.createApp({
data(){
return{
divText:'hehehedadada'
}
},
template:`
<div>{{divText}}</div>
`
});
const vm = heheApp.mount('#root_div');
</script>
</html>
運(yùn)行效果：
可以打開控制臺(tái)進(jìn)行終端操作：
輸入剛剛案例代碼中的Vue實(shí)例（
heheApp），查看實(shí)例內(nèi)容：查看根組件實(shí)例vm及其內(nèi)容：查看vm的字段：查看vm的data字段：對data中的數(shù)據(jù)字段賦值刀诬，
觸發(fā)Vue的ViewModel層效果咽扇，UI數(shù)據(jù)雙向綁定，
使得綁定這個(gè)數(shù)據(jù)字段的對應(yīng)的UI發(fā)生改變：再嘗試：
生命周期
先貼上案例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp">
<h1>{{heheString + ' ———— string in outer HTML'}}</h1>
</div>
</body>
<script>
var vm = Vue.createApp({
el:'#heheApp',
data() {
return{
heheString: 'Vue的生命周期'
}
},
beforeCreate: function() {
console.group('------beforeCreate創(chuàng)建前狀態(tài)------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","heheString: " + this.heheString)
},
created: function() {
console.group('------created創(chuàng)建完畢狀態(tài)------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","heheString: " + this.heheString); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount掛載前狀態(tài)------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","heheString: " + this.heheString); //已被初始化
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— beforeMount");
},
mounted: function() {
console.group('------mounted 掛載結(jié)束狀態(tài)------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","heheString: " + this.heheString); //已被初始化
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— mounted");
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","heheString: " + this.heheString);
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— beforeUpdate");
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","heheString: " + this.heheString);
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— updated");
},
beforeUnmount: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","heheString: " + this.heheString);
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— beforeUnmount");
},
unmounted: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","heheString: " + this.heheString);
console.log("%c%s", "color:red",
document.getElementById('heheApp').innerHTML, " ———— unmounted");
},
template: "<h1>{{this.heheString +' ———— string in template'}}</h1>"
})
const vmR = vm.mount('#heheApp');
</script>
</html>
