優(yōu)化系統(tǒng)設置深圳網(wǎng)站建設推廣優(yōu)化公司
目錄
一、組件化編程
? ? ? ? 1.基本介紹 :?
? ? ? ? 2.原理示意圖 :?
? ? ? ? 3.全局組件示例?:?
? ? ? ? 4.局部組件示例 :?
? ? ? ? 5.全局組件和局部組件的區(qū)別 :?
二、生命周期
? ? ? ? 1.基本介紹 :?
? ? ? ? 2.生命周期示意圖 :?
? ? ? ? 3.實例測試 :?
一、組件化編程
? ? ? ? 1.基本介紹 :?
? ? ? ? (1) 開發(fā)大型應用的時候，頁面往往劃分成很多部分，不同的頁面時常會有相同的部分，例如可能會有相同的頭部導航條。
? ? ? ? (2) 如果每個頁面都獨自開發(fā)，無疑增加了開發(fā)的成本。因此，可以將頁面的不同部分拆分成獨立的組件，然后在不同的頁面共享這些組件，避免重復開發(fā)。
????????(3) 組件化編程與之前的“模塊化編程”相比，范圍和目標更加精準。
? ? ? ? 2.原理示意圖 :?
? ? ? ? ? ? ? ? 組件化編程基本原理示意圖如下 :??
? ? ? ? ? ? ? ? PS :
????????????????(1) 組件(Component)是Vue.js最強大的功能之一。
? ? ? ? ? ? ? ? (2) 組件也是一個Vue實例，擁有自己的data數(shù)據(jù)池和methods，生命周期函數(shù)等。
? ? ? ? ? ? ? ? (3) 組件渲染需要HTML模板，所以增加了template屬性，值就是HTML模板。
? ? ? ? ? ? ? ? (4) 對于全局組件，任何Vue實例都可以直接在HTML中通過組件名稱來使用組件。
? ? ? ? ? ? ? ? (5) data不再是一個對象，而是一個函數(shù)，這樣保證了每次引用組件都是獨立的對象/數(shù)據(jù)。
? ? ? ? 3.全局組件示例?:?
? ? ? ? ? ? ? ? overall_components.html代碼如下 :?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demonstrate overallComponents</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><h2>組件化編程———全局組件</h2><!-- ... --><!-- 利用全局組件的名稱來引用全局組件 --><counter></counter><br/> <br/><counter></counter></div><script type="text/javascript">/*(1) 定義一個全局組件，第一個參數(shù)表示該組件的名稱，此處為“counter”;(2) 第二個參數(shù)———{}中表示的就是該組件相關的內(nèi)容。(3) template用于指定該組件的View,由于要用到data數(shù)據(jù)池中的數(shù)據(jù)，因此要使用到ES6新特性———模板字符串``.(方便操作數(shù)據(jù))(4) 組件也是一個Vue實例，擁有自己的data數(shù)據(jù)池和methods，生命周期函數(shù)等。(5) 對于組件來說，數(shù)據(jù)池中的數(shù)據(jù)要以函數(shù)/方法的形式來返回，與傳統(tǒng)返回形式不同,這么做的目的是保證每個組件的數(shù)據(jù)都是獨立的。*/Vue.component("counter", {template: `<button v-on:click="clickTest()">這個按鈕被點了{{ count }}次🌶</button>`,// data: {// count: 5,// },data() {return {count: 5}},methods: {clickTest() {this.count++;}}})//傳統(tǒng)Vue示例方式let vm = new Vue({el: "#app",data: {count: 5},methods: {// clickTest() {// this.count++;// }}})</script>
</body>
</html>? ? ? ? ? ? ? ? 運行效果 : (如下GIF圖)
? ? ? ? 4.局部組件示例 :?
? ? ? ? ? ? ? ? local_components.html代碼如下 :?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demonstrate localComponents</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app"><h2 style="color: deepskyblue">組件化編程———局部組件</h2><!--因為引入局部組件的Vue實例掛載到了該div上，因此可以在該div中使用定義的局部組件。--><counter></counter><br/> <br/><counter></counter>
</div><script type="text/javascript">//1.定義一個局部組件(組件本質(zhì)就是一個Vue實例)let buttonCounter = {template: `<button v-on:click="clickTest()">這個按鈕被點了{{count}}次🌶</button>`,data() {return {count: 11}},methods: {clickTest() {this.count++;}}}//2.若想使用局部組件，需要在Vue實例中引入//此時局部組件的使用范圍在當前Vuelet vm = new Vue({el: "#app",data: {},methods: {},components: {"counter": buttonCounter}})
</script>
</body>
</html>? ? ? ? ? ? ? ? 運行結果 : (如下GIF)
? ? ? ? 5.全局組件和局部組件的區(qū)別 :?
? ? ? ? (1) 全局組件屬于所有Vue實例，可以在所有Vue實例掛載的元素上使用[全局組件本質(zhì)也是依賴于Vue實例]，通過組件名就可以直接使用全局組件。
? ? ? ? (2) 局部組件需要引入才能使用，只有引入了局部組件的Vue實例，其掛載的元素上才能使用定義的局部組件。
? ? ? ? (3) 共性——組件的定義，必須在Vue實例的定義之前，否則無法識別。
二、生命周期
? ? ? ? 1.基本介紹 :?
? ? ? ? (1) Vue實例有一個完整的生命周期，從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM、渲染-更新-渲染、卸載等一系列過程，稱為Vue實例的生命周期。
? ? ? ? (2) 每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程(比如設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM、在數(shù)據(jù)變化時更新DOM等)，同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)（也叫鉤子函數(shù)、監(jiān)聽函數(shù)、生命周期函數(shù)），這給了用戶在不同階段添加自己的代碼的機會。
? ? ? ? 2.生命周期示意圖 :?
????????????????如下圖所示 :?
????????(1) new Vue():
? ? ? ? ? ? ? ? new了一個Vue實例對象，此時就會進入組件的創(chuàng)建過程。
? ? ? ? (2) Init Events & Lifecycle:
? ? ? ? ? ? ? ? 初始化組件的事件和生命周期函數(shù)。
? ? ? ? (3) beforeCreate:
? ? ? ? ? ? ? ? 組件創(chuàng)建之后遇到的第一個生命周期函數(shù)，這個階段data和methods以及dom結構都未被初始化，即獲取不到data的值，也不能調(diào)用methods中的函數(shù)。
? ? ? ? (4) Init injections & reactivity:
? ? ? ? ? ? ? ? 這個階段會初始化data和methods中的方法。
? ? ? ? (5) created:
? ? ? ? ? ? ? ? 這個階段組件的data和methods中的方法已初始化結束，可以訪問，但是DOM結構未初始化，頁面未渲染。
? ? ? ? ? ? ? ? PS : 往往在“created”這個階段發(fā)出Ajax請求，因為下一步就是編譯模板。
? ? ? ? (6) 編譯模板結構
? ? ? ? (7) beforeMount:
? ? ? ? ? ? ? ? 當模板在內(nèi)存中編譯完成時，此時內(nèi)存中的模板結構還未渲染至頁面上，看不到真正的數(shù)據(jù)。
? ? ? ? (8) Create vm.$el and replace `el` with it:
? ? ? ? ? ? ? ? 把內(nèi)存中渲染好的模板結構替換至真實的DOM結構，也就是頁面上。
? ? ? ? (9) mounted:
? ? ? ? ? ? ? ? 此時，頁面已渲染好，用戶看到的是真實的頁面數(shù)據(jù)，生命周期創(chuàng)建階段完畢，進入運行階段。
? ? ? ? (10) 生命周期運行中
? ? ? ? (10.1) beforeUpdate:
? ? ? ? ? ? ? ? 當執(zhí)行此鉤子函數(shù)時，數(shù)據(jù)池的數(shù)據(jù)是新的，但是頁面是舊的。
? ? ? ? (10.2) Virtual DOM re-render and patch:
? ? ? ? ? ? ? ? 根據(jù)最新的data數(shù)據(jù)，重新渲染內(nèi)存中的模板結構，并把渲染好的模板結構替換至頁面上。
? ? ? ? (10.3) updated:
? ? ? ? ? ? ? ? 頁面已經(jīng)完成了更新，此時，data數(shù)據(jù)池和頁面的數(shù)據(jù)都是新的。
? ? ? ? (11) beforeDestroy:
? ? ? ? ? ? ? ? 當執(zhí)行此函數(shù)時，組件即將被銷毀，但是還沒有真正開始銷毀，此時組件的data，methods數(shù)據(jù)或方法還可被調(diào)用。
? ? ? ? (12) Teardown......:
? ? ? ? ? ? ? ? 注銷組件和事件監(jiān)聽
? ? ? ? (13) destroyed:
? ? ? ? ? ? ? ? 組件已經(jīng)完成了銷毀。
? ? ? ? 3.實例測試 :?
? ? ? ? ? ? ? ? 在各個鉤子函數(shù)中嘗試打印出data數(shù)據(jù)池中的數(shù)據(jù)，調(diào)用methods中的方法，并獲取DOM對象；以查看當前生命周期中能否使用data數(shù)據(jù)池中的數(shù)據(jù)，能否調(diào)用methods中的方法，能否獲取到渲染后的DOM對象。
? ? ? ? ? ? ? ? life_cycle.html代碼如下 :?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Life cycle Demonstration</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><div id="app"><span id="num">{{num}}</span><!-- @是v-on:的簡寫 --><button @click="num++">Like</button><h2>{{name}} has {{num}} likes</h2></div><script type="text/javascript">let vm = new Vue({el: "#app",data: {name: "Cyan_RA9",num: 5},methods: {getName() {return this.name;}},//組件創(chuàng)建后，遇到的第一個鉤子函數(shù)beforeCreate() {console.log("beforeCreate~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);//不能,在beforeCreate階段調(diào)用methods中的方法會報錯。// console.log("beforeCreate~能否使用methods中的方法?",this.getName());console.log("beforeCreate~能否得到渲染后的DOM對象",document.getElementById("num"));},//(4)Init injections & reactivity:這個階段會初始化data和methods中的方法//(5)created:created() {console.log("created~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);console.log("created~能否使用methods中的方法?",this.getName());console.log("created~能否得到渲染后的DOM對象",document.getElementById("num"));},//掛載DOM之前beforeMount() {console.log("beforeMount~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);console.log("beforeMount~能否使用methods中的方法?",this.getName());console.log("beforeMount~能否得到渲染后的DOM對象",document.getElementById("num"));},//掛載DOM之后mounted() {console.log("mounted~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);console.log("mounted~能否使用methods中的方法?",this.getName());console.log("mounted~能否得到渲染后的DOM對象",document.getElementById("num"));},//數(shù)據(jù)變化前，不會調(diào)用beforeUpdate鉤子函數(shù)//只有當數(shù)據(jù)發(fā)生變化后，才會調(diào)用beforeUpdate鉤子函數(shù)。beforeUpdate() {console.log("beforeUpdate~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);console.log("beforeUpdate~能否使用methods中的方法?",this.getName());console.log("beforeUpdate~能否得到渲染后的DOM對象",document.getElementById("num"));console.log("beforeUpdate~能否得到渲染后的DOM對象",document.getElementById("num").innerText);},//調(diào)用beforeUpdate鉤子時，還沒更新頁面。//需要等下一步Virtual DOM re-render and patch://根據(jù)最新的data數(shù)據(jù)，重新渲染內(nèi)存中的模板結構，并把渲染好的模板結構替換至頁面上。//接著調(diào)用updated鉤子時，頁面已經(jīng)更新。updated() {console.log("updated~能否得到數(shù)據(jù)池中的數(shù)據(jù)?",this.name,this.num);console.log("updated~能否使用methods中的方法?",this.getName());console.log("updated~能否得到渲染后的DOM對象",document.getElementById("num"));console.log("beforeUpdate~能否得到渲染后的DOM對象",document.getElementById("num").innerText);},})</script>
</body>
</html>? ? ? ? ? ? ? ? 運行效果 : (如下GIF圖)
? ? ? ? ? ? ? ? 控制臺打印出的結果如下 :?
? ? ? ? ? ? ? ? 此時由于num屬性的值還未變化，因此不會調(diào)用beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)，
? ? ? ? ? ? ? ? 點擊按鈕修改num屬性的值，會看到新的鉤子函數(shù)被調(diào)用，如下圖所示 :?
? ? ? ? System.out.println("END------------------------------------------------------");