一、定義
vm代表：new Vue()實例對象，vc代表：VueComponent實例對象
this的歸屬問題：在vue組件使用中，常規(guī)函數(shù)function(){}的this都是指向當(dāng)前實例對象，如果是箭頭函數(shù)()=>{}，因為箭頭函數(shù)是沒有this的，會向外向上一層查找this；這一點在很多時候會用到這個定義，需要注意區(qū)別不同的使用場景
模塊化：對js按功能來拆分，向外提供特定功能的js 程序，一般一個js文件就是一個js 模塊。類似java的工具類。
組件化：用來實現(xiàn)局部(特定)功能效果的代碼集合，通過對不同功能模塊來拆分和封裝。一個組件可包含html、css、js、資源文件等。和安卓組件化有點區(qū)別，安卓的組件化，每個組件可單獨運行。前端組件類似于安卓自定義控件。當(dāng)然前端也有自己的微前端功能。
-
傳統(tǒng)多頁面開發(fā)
image.png -
組件化開發(fā)
image.png -
非單文件組件:一個html文件中的js注冊包含有n個組件。
image.png 單文件組件（SFC，Single File Component）：一個html文件只包含一個.vue父組件，每個子組件定義在這個 .vue 文件中。每個子組件.vue文件中包含了模板、腳本和樣式三個部分。這種方式將一個組件的所有定義集中在一個文件中，提高了開發(fā)效率和代碼的可維護(hù)性。
組件中的data必須是一個帶返回值的函數(shù)
組件中的template對象內(nèi)的內(nèi)容必須要包含一個根元素
記住全局注冊的行為必須在根 Vue 實例 (通過
new Vue) 創(chuàng)建之前發(fā)生。
二、非單文件組件：不常用
-
創(chuàng)建和使用
-
VueComponent對象
組件的實例對象本質(zhì)是VueComponent對象。每調(diào)用一次Vue.extend()創(chuàng)建一個組件就對應(yīng)創(chuàng)建一個新的VueComponent構(gòu)造函數(shù)（注意不是創(chuàng)建了實例，是類，只有new 才能創(chuàng)建新實例）。VueComponent對象也是通過數(shù)據(jù)代理方式實現(xiàn)的，里面也會有_data()對象、setter（）和getter()函數(shù)等。
編寫一個組件<ChildView/>標(biāo)簽也即只有<body> <ChildView/> </body>真正使用了后才是真正創(chuàng)建了一個組件實例對象。框架內(nèi)部會直接幫我們new了一個實例對象，創(chuàng)建一個新的VueComponent實例對象，腳手架中只是省略了顯示書寫。
VueComponent對象與Vue對象的元素差異:
1.VueComponent對象el默認(rèn)是組件布局根元素，且不需要自己寫el設(shè)置；根Vue的el元素是模版id容器
2.VueComponent對象data必須是函數(shù)，根Vue的data元素是可以是函數(shù)也可以是對象
3.因為組件是可復(fù)用的 vue 實例，所以它們與new Vue（）是接收相同的選項，實例的屬性內(nèi)容幾乎相同。例如computed、watch 、methods，以及生命周期鉤子等
原型屬性：顯式原型屬性
prototype（函數(shù)或類擁有），隱式原型屬性_ _proto_ _（實例對象擁有）實例的隱式原型屬性
_ _proto_ _永遠(yuǎn)指向自己的締造者。弱一級的原型對象可以一直往上追溯到父一級的原型對象prototype，可以調(diào)用父級原型對象prototype中的函數(shù)和屬性。
如：往Vue原型對象添加一個myX屬性
Vue.prototype.myX=886
//原始方式創(chuàng)建
const student1 = Vue.extend({
template: `
<div>
<div>姓名：<input type="text" v-model="userinfo.name"></div>
<div>年齡：<input type="text" v-model="userinfo.age"></div>
</div>`,
data: function () {
return {
userinfo: {
name: '王林',
age: 18,
}
}
},
methods:{
showMy(){
//這里可以直接通過組件VueComponent訪問到myX
console.log('showMy:'+this.myX)
}
}
})
三、單文件組件：比較常用
-
簡單描述
用腳手架Vue-Cli創(chuàng)建的Vue項目，這個Vue項目只有一個index.html頁面，其他頁面都是.vue格式的組件。單文件組件特點是頁面都是.vue格式的文件組成。
-
搭建Vue2腳手架：Vue-CLI（vue command line interface）
該方式創(chuàng)建的是單文件組件
-
ref屬性
原生控件通過ref獲取的是一個真實DOM元素，而子組件通過ref獲取的是一個VueComponent對象
-
props組件參數(shù)屬性
類似于java方法的形參。data：{ age:12 }和props:[ age ]如果這兩個對象里面存在同名變量是互不兼容的，不可同名，props優(yōu)先級更高。且在程序運行時是先執(zhí)行掃描props后執(zhí)行data，可以定義一個data:{myAge:this.age}區(qū)分開。
參數(shù)可以是字符串、布爾值、數(shù)值、也可以是一個函數(shù)
注意：在Vue組件中不建議修改父組件傳遞過來的props里面的參數(shù)值，雖然可以修改成功，有時候也可以簡單實現(xiàn)特定功能，但是依然是不建議這樣做的
由 子==》父 通信多種方式：
======組件通信1：子組件通過props函數(shù)參數(shù)方式向父組件回調(diào)通信=======
=====>子組件ChildView
<div @click="showCall">點擊回調(diào)父組件</div >
export default {
name: "ChildView",
props: {
myFunctionA: Function,
},
methods: {
showCall() {
this.myFunctionA(123456);
},
},
};
=====>父組件
<ChildView :myFunctionA="myFunctionB"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子組件回調(diào)內(nèi)容=" + obj);//子組件回調(diào)內(nèi)容=123456
},
},
};
======組件通信2：子組件通過v-on:自定義事件方式向父組件回調(diào)通信=======
=====>子組件ChildView
<div @click="showCall">點擊回調(diào)父組件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//發(fā)射和觸發(fā)實例身上的自定義事件myFunctionA
this.$emit("myFunctionA",123456);
},
},
};
=====>父組件
<ChildView v-on:myFunctionA="myFunctionB"/ >
或
<ChildView @myFunctionA="myFunctionB"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子組件回調(diào)內(nèi)容=" + obj);//子組件回調(diào)內(nèi)容=123456
},
},
};
======組件通信3：組件通信2的變種，父組件通過ref與vc實例接收通信=======
=====>子組件ChildView
<div @click="showCall">點擊回調(diào)父組件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//發(fā)射和觸發(fā)實例身上的自定義事件myFunctionA
this.$emit("myFunctionA",123456);
},
},
};
=====>父組件
<ChildView ref="demo"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子組件回調(diào)內(nèi)容=" + e);//子組件回調(diào)內(nèi)容=123456
},
},
mounted(){
//模擬一個頁面掛載顯示3秒后綁定回調(diào)，點擊子組件后回調(diào)收集信息的操作
settimeout(() => {
this.$refs.demo.&on("myFunctionA",this.myFunctionB)
}, 3000);
}
};
======組件通信4：全局事件總線，推薦的方式=======
=====>子組件ChildView
<div @click="showCall">點擊回調(diào)父組件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//發(fā)射事件myFunctionA
this.$bus.$emit("myFunctionA",123456);
},
},
};
=====>父組件
<ChildView/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子組件回調(diào)內(nèi)容=" + e);//子組件回調(diào)內(nèi)容=123456
},
},
mounted(){
//通過注冊的$bus事件總線，監(jiān)聽
this.$bus.&on("myFunctionA",this.myFunctionB)
}
};
-
mixin(混入/混合)
功能：可以把多個組件共用的代碼模塊和配置提取封裝成一個mixin對象來使用。mixin用于在多個組件間共享代碼。它們允許你定義一組可復(fù)用的選項，然后將這些選項混合到任何組件的選項中。mixin可以包含組件的任何合法選項，如 data、methods、computed、watch 等。
自定義插件：更適合添加全局功能，如全局方法、指令、過濾器等。
mixin：更適合在多個組件間共享代碼和邏輯。被導(dǎo)入的地方才生效。
第一步定義mixin，例如:
{
data(){},
methods:{},
mounted() {}
......
}
第二步使用mixin，例如:
(1).全局混入，在入口文件main.js:Vue.mixin(xxx)
(2).局部混入:mixins :「'xxx']
《----------mixin.js代碼如下-----------》
export const myMixin1 = {
data() {
return {
//與組件同名count變量沖突，組件count優(yōu)先級高(覆蓋替換)
count: 0
}
},
methods: {
//與組件同名showCount()沖突，組件showCount()優(yōu)先級高(覆蓋替換)
showCount() {
alert(this.count)
}
},
mounted() {
//生命周期：如果組件也重新寫了mounted() ，則會合并，
//組件優(yōu)先級高，先調(diào)用組件mounted()，后調(diào)用mixin的mounted()方法
console.log('mixin mounted')
}
}
export const myMixin2 = {
......
}
----------》組件內(nèi)局部引入mixin.js
import {myMixin1，myMixin2 } from '../mixins/mixin.js'
export default {
mixins: [myMixin1，myMixin2]
}
----------》項目全局引入mixin.js
import {myMixin1，myMixin2} from '../mixins/mixin.js'
Vue.mixin(myMixin1)
Vue.mixin(myMixin2)
-
自定義插件
在 Vue.js 中，自定義插件和 mixin 都是用來擴(kuò)展 Vue 功能和代碼復(fù)用的機(jī)制，但它們的用途和工作方式有所不同。
自定義插件主要用于向 Vue 添加全局功能，如全局方法、指令、過濾器、組件等。插件可以包含一個或多個功能，并且可以通過 Vue.use() 方法來安裝到 Vue 應(yīng)用中。插件的核心是一個對象或構(gòu)造函數(shù)，必須提供一個 install 方法。
Vue.use()被調(diào)用引入插件后，就會掃描一遍插件內(nèi)容。
-
scoped樣式作用域和lang寫法
未添加<style scoped >的時候，如果多個組件內(nèi)節(jié)點定義同名class="demo"選擇器，在不同組件內(nèi)都寫了demo樣式，則各個組件內(nèi)的demo樣式會互相影響。添加scoped限制樣式作用域就鎖在當(dāng)前組件中，通常會給子組件加上scoped。
注意：App.vue內(nèi)的style可以被子組件訪問到。
-
自定義事件
1.組件實例使用自定義事件：<ChildView v-on:myFunctionA="demoFunctionListener"/ >
2.組件內(nèi)設(shè)置綁定： this.$emit("myFunctionA",123456);
4.組件內(nèi)設(shè)置解綁單個自定義事件： this.$off("myFunctionA");
5.組件內(nèi)設(shè)置解綁多個自定義事件： this.$off(["myFunctionA","myFunctionB","myFunctionC"]);
6.組件內(nèi)設(shè)置解綁所有自定義事件：this.$off();
父組件往子組件傳遞函數(shù)的操作可以改寫為自定義事件，因為傳遞函數(shù)到子組件的目的就是為了子組件能給父組件回調(diào)，自定義事件剛好滿足這個需求。當(dāng)然最好用全局事件總線方式。
-
全局事件總線
main.js中注冊全局事件Vue.prototype.$bus = this
-
nextTick操作（比較常用和重要）
可以監(jiān)聽捕獲Vue在下一次解析dom模板的動作。對于多次更新Vue數(shù)據(jù)導(dǎo)致的回調(diào)更新，可以在nextTick函數(shù)方法中在所有代碼執(zhí)行完畢后，統(tǒng)一 一次執(zhí)行更新解析模版，這是一種Vue的優(yōu)化機(jī)制。
-
配置代理服務(wù)
通過Vue腳手架便捷快速的配置代理服務(wù)器，解決瀏覽器同源策略問題，實現(xiàn)跨域請求。該方式配置的代理服務(wù)器會在腳手架的幫助下，運行在與當(dāng)前瀏覽器項目同一個端口號上，所以可以實現(xiàn)代理服務(wù)的功能。瀏覽器和代理服務(wù)運行在同一端口同一個源上，規(guī)避了同源策略問題。
pathRewrite:設(shè)置正則表達(dá)式，將發(fā)送到目標(biāo)服務(wù)的前綴替換為空字符串前綴。
-
第三方資源引用
-
插槽的使用
若子組件template 中沒有包含一個 <slot> 元素，則該組件在父組件被使用的地方，起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會被拋棄。
四、vuex插件
vuex是什么？
vuex 是一個用來管理組件之間通信的插件，它是一個專為【vue.js】應(yīng)用程序開發(fā)的狀態(tài)管理模式。它解決了組件之間同一狀態(tài)的共享問題，它能夠更好地在組件外部管理狀態(tài)。每一個 vuex 應(yīng)用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。
（1）Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件（注：跨不同組件）也會相應(yīng)地得到高效更新。（這是用這個插件的主要目的）
（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。
（3）狀態(tài)管理：管理數(shù)據(jù)的讀/寫，數(shù)據(jù)帶有響應(yīng)式特性。
Vuex用于多個組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫)，也是一種組件間通信的方式，且適用于任意組件間通信。有點類似java中全局的靜態(tài)變量和靜態(tài)類方法，但是java的靜態(tài)屬性不具備響應(yīng)式特性。
- VueComponents(客戶):下單給Actions。
- Actions（服務(wù)員）：dispatch處理稍微復(fù)雜的業(yè)務(wù)邏輯。過于簡單的可以直接繞過它，在組件直接使用commit操作到Mutations。
—》$store.dispatch("abc",xxxxx) abc方法名小寫 - Mutations（廚子）：處理最后的數(shù)據(jù)成品。
—》$store.commit("Abc",xxxxx) ABC方法名大寫 - Devtools（廚房監(jiān)工）：開發(fā)者工具。監(jiān)聽Mutations變化。在整個vuex使用過程中，可以在Actions直接操作store的state內(nèi)容。但是如此使用的話，開發(fā)者工具就無法監(jiān)聽Mutations且失去作用和意義了。
—》獲取store內(nèi)狀態(tài)$store.state.aabbcc
搭建環(huán)境：vue2中，要用vuex的3版本；vue3中，要用vuex的4版本。vue2安裝vuex：npm i vuex@3
- getters屬性：是計算屬性computed的孿生兄弟。當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用getters加工。寫在getters的計算方法也是全局通用的。
-
mapState，mapGetters
image.png
-
mapActions，mapMutations
注：incrementOdd，incrementWait；increment，decrement是幾個自定義函數(shù)名
-
模塊化命名空間
namespaced:true
優(yōu)點：不同業(yè)務(wù)模塊分不同的js文件編寫不同的countAbout.js，personAbout.js對象狀態(tài)文件，通過在store.js文件中導(dǎo)入后統(tǒng)一管理這些狀態(tài)文件。
五、路由插件
-
介紹
vue單頁面項目如何實現(xiàn)以往多頁面html展示？
那就需要用到路由插件了。
使用路由技術(shù)，把多個組件按路由鍵值對形式保存起來，通過路由器展示想要展示的組件，實現(xiàn)多頁面項目的效果。并且路由可以實現(xiàn)單個頁面部分區(qū)域的組件顯示和切換。
系統(tǒng)關(guān)鍵詞：this.$router
切記是routes而不是routers， routes: [ { path: "/MyRouterA", component: MyRouterA }, ]vue2只能使用router3.0，在下載時指定版本號：npm i vue-router@3
-
多級路由（嵌套路由）
router.js中配置一級路由路徑加‘/’，二級路由不需要‘/’。router-link中需要寫組件的完整路徑。
home，about路由組件都是頂級路由，news，message都是子路由。如下配置，要想讓news在home的位置顯示，那就必須把news拎出外面和home一層設(shè)置為頂級路由
-
路由命名
-
路由傳參
1.query傳參方式
to的字符串傳參：參數(shù)簡便的時候使用字符串
to的對象傳參：參數(shù)較多的時候使用對象
2.params傳參方式(常用)
-
props接受參數(shù)方式
-
歷史棧replace屬性使用
replace的權(quán)限是給到目標(biāo)路由的，由它決定是否覆蓋替換。
-
編程式路由導(dǎo)航：在js中操作路由，更加自由多樣化
-
緩存路由組件
在一個tab導(dǎo)航切換組件中，緩存其中多個組件。如： <keep-alive :include="News,Message">
-
路由組件新增的生命周期鉤子：activated，deactivated
-
路由守衛(wèi)：相當(dāng)于路由過濾器
全局守衛(wèi)：router.js中設(shè)置前置守衛(wèi)beforeEach和后置守衛(wèi)afterEach
獨享守衛(wèi)：router.js中設(shè)置。只有一個獨立的前置守衛(wèi)beforeEnter
組件內(nèi)守衛(wèi)：在各個子組件中設(shè)置。beforeRouteEnter和beforeRouteLeave
全局守衛(wèi)beforeEach和組件內(nèi)守衛(wèi)beforeRouteEnter都是組件實例創(chuàng)建之前調(diào)用，之后馬上調(diào)用afterEach，
而beforeRouteLeave是當(dāng)前組件實例離開的時候才會調(diào)用，到達(dá)目標(biāo)組件后才會執(zhí)行上一個組件的beforeDestroy。
-
路由器的兩種工作模式
