一倘待、定義
vm代表：new Vue()實(shí)例對象飒货，vc代表：VueComponent實(shí)例對象
this的歸屬問題：在vue組件使用中批狐，常規(guī)函數(shù)function(){}的this都是指向當(dāng)前實(shí)例對象瓮下，如果是箭頭函數(shù)()=>{}记劈，因?yàn)榧^函數(shù)是沒有this的盖腕，會向外向上一層查找this赫冬；這一點(diǎn)在很多時候會用到這個定義，需要注意區(qū)別不同的使用場景
模塊化：對js按功能來拆分溃列，向外提供特定功能的js 程序劲厌，一般一個js文件就是一個js 模塊。類似java的工具類听隐。
組件化：用來實(shí)現(xiàn)局部(特定)功能效果的代碼集合补鼻，通過對不同功能模塊來拆分和封裝。一個組件可包含html雅任、css风范、js、資源文件等沪么。和安卓組件化有點(diǎn)區(qū)別硼婿，安卓的組件化，每個組件可單獨(dú)運(yùn)行禽车。前端組件類似于安卓自定義控件加酵。當(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 實(shí)例 (通過
new Vue) 創(chuàng)建之前發(fā)生。
二肛响、非單文件組件：不常用
-
創(chuàng)建和使用
-
VueComponent對象
組件的實(shí)例對象本質(zhì)是VueComponent對象。每調(diào)用一次Vue.extend()創(chuàng)建一個組件就對應(yīng)創(chuàng)建一個新的VueComponent構(gòu)造函數(shù)（注意不是創(chuàng)建了實(shí)例特笋，是類剃浇，只有new 才能創(chuàng)建新實(shí)例）。VueComponent對象也是通過數(shù)據(jù)代理方式實(shí)現(xiàn)的，里面也會有_data()對象虎囚、setter（）和getter()函數(shù)等角塑。
編寫一個組件<ChildView/>標(biāo)簽也即只有<body> <ChildView/> </body>真正使用了后才是真正創(chuàng)建了一個組件實(shí)例對象√约ィ框架內(nèi)部會直接幫我們new了一個實(shí)例對象圃伶，創(chuàng)建一個新的VueComponent實(shí)例對象，腳手架中只是省略了顯示書寫蒲列。
VueComponent對象與Vue對象的元素差異:
1.VueComponent對象el默認(rèn)是組件布局根元素窒朋，且不需要自己寫el設(shè)置；根Vue的el元素是模版id容器
2.VueComponent對象data必須是函數(shù)蝗岖，根Vue的data元素是可以是函數(shù)也可以是對象
3.因?yàn)榻M件是可復(fù)用的 vue 實(shí)例炼邀，所以它們與new Vue（）是接收相同的選項(xiàng)，實(shí)例的屬性內(nèi)容幾乎相同剪侮。例如computed拭宁、watch 、methods瓣俯，以及生命周期鉤子等
原型屬性：顯式原型屬性
prototype（函數(shù)或類擁有）杰标，隱式原型屬性_ _proto_ _（實(shí)例對象擁有）實(shí)例的隱式原型屬性
_ _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項(xiàng)目驼仪，這個Vue項(xiàng)目只有一個index.html頁面掸犬，其他頁面都是.vue格式的組件。單文件組件特點(diǎn)是頁面都是.vue格式的文件組成绪爸。
-
搭建Vue2腳手架：Vue-CLI（vue command line interface）
該方式創(chuàng)建的是單文件組件
-
ref屬性
原生控件通過ref獲取的是一個真實(shí)DOM元素湾碎，而子組件通過ref獲取的是一個VueComponent對象
-
props組件參數(shù)屬性
類似于java方法的形參。data：{ age:12 }和props:[ age ]如果這兩個對象里面存在同名變量是互不兼容的奠货，不可同名介褥，props優(yōu)先級更高。且在程序運(yùn)行時是先執(zhí)行掃描props后執(zhí)行data递惋，可以定義一個data:{myAge:this.age}區(qū)分開柔滔。
參數(shù)可以是字符串、布爾值萍虽、數(shù)值睛廊、也可以是一個函數(shù)
注意：在Vue組件中不建議修改父組件傳遞過來的props里面的參數(shù)值，雖然可以修改成功杉编，有時候也可以簡單實(shí)現(xiàn)特定功能超全，但是依然是不建議這樣做的
由 子==》父 通信多種方式：
======組件通信1：子組件通過props函數(shù)參數(shù)方式向父組件回調(diào)通信=======
=====>子組件ChildView
<div @click="showCall">點(diǎn)擊回調(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ǎn)擊回調(diào)父組件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//發(fā)射和觸發(fā)實(shí)例身上的自定義事件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實(shí)例接收通信=======
=====>子組件ChildView
<div @click="showCall">點(diǎn)擊回調(diào)父組件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//發(fā)射和觸發(fā)實(shí)例身上的自定義事件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ǎn)擊子組件后回調(diào)收集信息的操作
settimeout(() => {
this.$refs.demo.&on("myFunctionA",this.myFunctionB)
}, 3000);
}
};
======組件通信4：全局事件總線卵迂，推薦的方式=======
=====>子組件ChildView
<div @click="showCall">點(diǎn)擊回調(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ù)用的選項(xiàng)，然后將這些選項(xiàng)混合到任何組件的選項(xiàng)中挂疆。mixin可以包含組件的任何合法選項(xiàng)改览，如 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]
}
----------》項(xiàng)目全局引入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é)點(diǎn)定義同名class="demo"選擇器，在不同組件內(nèi)都寫了demo樣式许起，則各個組件內(nèi)的demo樣式會互相影響十偶。添加scoped限制樣式作用域就鎖在當(dāng)前組件中，通常會給子組件加上scoped园细。
注意：App.vue內(nèi)的style可以被子組件訪問到惦积。
-
自定義事件
1.組件實(shí)例使用自定義事件：<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ù)的操作可以改寫為自定義事件，因?yàn)閭鬟f函數(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ù)器，解決瀏覽器同源策略問題招刹，實(shí)現(xiàn)跨域請求恬试。該方式配置的代理服務(wù)器會在腳手架的幫助下，運(yùn)行在與當(dāng)前瀏覽器項(xiàng)目同一個端口號上疯暑，所以可以實(shí)現(xiàn)代理服務(wù)的功能训柴。瀏覽器和代理服務(wù)運(yùn)行在同一端口同一個源上，規(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)行集中式的管理(讀/寫)济赎，也是一種組件間通信的方式鉴逞，且適用于任意組件間通信。有點(diǎ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屬性：是計(jì)算屬性computed的孿生兄弟。當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時壤追，可以使用getters加工玫荣。寫在getters的計(jì)算方法也是全局通用的。
-
mapState大诸，mapGetters
image.png
-
mapActions捅厂，mapMutations
注：incrementOdd贯卦，incrementWait；increment焙贷，decrement是幾個自定義函數(shù)名
-
模塊化命名空間
namespaced:true
優(yōu)點(diǎn)：不同業(yè)務(wù)模塊分不同的js文件編寫不同的countAbout.js撵割，personAbout.js對象狀態(tài)文件，通過在store.js文件中導(dǎo)入后統(tǒng)一管理這些狀態(tài)文件辙芍。
五啡彬、路由插件
-
介紹
vue單頁面項(xiàng)目如何實(shí)現(xiàn)以往多頁面html展示？
那就需要用到路由插件了故硅。
使用路由技術(shù)庶灿，把多個組件按路由鍵值對形式保存起來，通過路由器展示想要展示的組件吃衅，實(shí)現(xiàn)多頁面項(xiàng)目的效果往踢。并且路由可以實(shí)現(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
獨(dú)享守衛(wèi)：router.js中設(shè)置。只有一個獨(dú)立的前置守衛(wèi)beforeEnter
組件內(nèi)守衛(wèi)：在各個子助教中設(shè)置尤慰。beforeRouteEnter和beforeRouteLeave
全局守衛(wèi)beforeEach和組件內(nèi)守衛(wèi)beforeRouteEnter都是組件實(shí)例創(chuàng)建之前調(diào)用馏锡，之后馬上調(diào)用afterEach，
而beforeRouteLeave是當(dāng)前組件實(shí)例離開的時候才會調(diào)用伟端，到達(dá)目標(biāo)組件后才會執(zhí)行上一個組件的beforeDestroy杯道。
-
路由器的兩種工作模式
