目錄
一、虛擬DOM?
二、MVVM
三、數(shù)據(jù)代理
四、事件修飾
五、鍵盤(pán)事件
六、插值語(yǔ)法{{}}、方法methods、計(jì)算屬性computed
七、 監(jiān)視、深度監(jiān)視、另一種寫(xiě)法、簡(jiǎn)寫(xiě)
八、computed計(jì)算屬性和watch偵聽(tīng)
九、什么時(shí)候用箭頭函數(shù)
十、Vue偵聽(tīng)和watch偵聽(tīng)原理
十一、從Vue偵聽(tīng)原理得出，往對(duì)象里添加新的屬性不具備響應(yīng)式，數(shù)組下標(biāo)對(duì)應(yīng)的數(shù)據(jù)也不具備響應(yīng)式。
十二、常用命令
十三、自定義指令
十四、mixin混合
十五、插件
十六、腳手架依托于webpack
十七、mapState mapGatters
十八、插槽
???????
一、虛擬DOM?
1、原生JS是命令式編程，當(dāng)渲染在頁(yè)面的數(shù)據(jù)發(fā)生一點(diǎn)點(diǎn)變化，需要整個(gè)重新渲染一編。vue.js漸進(jìn)式框架有個(gè)虛擬DOM的概念，運(yùn)用diff算法，比較新舊數(shù)據(jù)，相同的數(shù)據(jù)不變不重渲染，不同的部分新數(shù)據(jù)覆蓋舊數(shù)據(jù)。
二、MVVM
1、MV：M是數(shù)據(jù)‘模塊’，V是DOM元素‘視圖’
2、VM：是指Vue對(duì)象實(shí)例。是M和V聯(lián)系的橋梁
三、數(shù)據(jù)代理
1、Object.defineProperty()
let a={x:9};
let b={y:1};
Object.defineProperty(b,'x',{
? ? ? ? ? ? ? ? ? ? ? ? ?get(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return a.x ;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }?,
? ? ? ? ? ? ? ? ? ? ? ? ? ?set(value){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a.x=value
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}?,? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
})
?2、輸出vue實(shí)例對(duì)象，data下的數(shù)據(jù)存放在vm的_data對(duì)象中。而dom元素插值數(shù)據(jù)是從vm下的取的屬性值。也就是說(shuō)vue封裝了數(shù)據(jù)代理機(jī)制(底層用了Object.defineProperty()方法)。
四、事件修飾
0、@click=handle(event)等價(jià)于@click=handle($event)
1、prevent：阻止默認(rèn)行為，比如a表親啊加鏈接的跳轉(zhuǎn)行為會(huì)被阻止；
2、stop：阻止冒泡事件；
3、once：事件只能執(zhí)行一次；
4、capture：冒泡模式切換成捕獲模式；
5、self：只有事件發(fā)生在自己身上（不是因?yàn)槊芭莼蛘卟东@觸發(fā)的事件）才會(huì)觸發(fā)事件；
6、passive：比如@wheel事件，只有執(zhí)行完方法里的代碼才會(huì)回調(diào)滾動(dòng)滾動(dòng)條，加了passive,會(huì)先滾動(dòng)滾動(dòng)條再執(zhí)行方法里的行為。
7、事件修飾可以連著寫(xiě)，比如：@click.prevent.stop=handle()
五、鍵盤(pán)事件
1、event.key獲取鍵盤(pán)按鍵的名稱(chēng)，evant.keycode獲取鍵盤(pán)按鍵的代碼
2、@keydown,@keyup
3、常用按鍵名稱(chēng)：enter、tab（只對(duì)@keydown有效）、eac、delete、space、top、bottom、left、right
4、特殊用法的幾個(gè)按鍵：ctrl、alt、shift、meta
配合@keyup使用：按下按鍵，配合其他按鍵再釋放其他按鍵，觸發(fā)事件，比如ctrl+s再釋放s鍵
配合@keydown用：正常使用
當(dāng)配合@keyup使用的時(shí)候，可以指定另一個(gè)按鍵，如：@keyup.ctrl.k=handle(),這樣就只能配合k使用了。
5、也可以配合使用按鍵的keycode（隨時(shí)會(huì)停止維護(hù)，不推薦）
6、自定義鍵名：vue實(shí)例外，Vue.keycodes.自定義建名=按鍵編碼
六、插值語(yǔ)法{{}}、方法methods、計(jì)算屬性computed
1、當(dāng)任意數(shù)據(jù)發(fā)生改變時(shí)，dom元素和插值語(yǔ)法中的數(shù)據(jù)或者方法（寫(xiě)插值語(yǔ)法中的防范必須帶括號(hào)）會(huì)重新解析一遍
2、而計(jì)算屬性只會(huì)初次加載和相關(guān)聯(lián)數(shù)據(jù)發(fā)生改變的時(shí)候才會(huì)觸發(fā)計(jì)算屬性重新解析，因?yàn)橛?jì)算屬性可以緩存數(shù)據(jù)
3、計(jì)算屬性中有g(shù)etter方法和setter方法，當(dāng)只有g(shù)etter方法，沒(méi)有setter方法的時(shí)候，計(jì)算屬性可以簡(jiǎn)寫(xiě)，寫(xiě)在插值語(yǔ)法中的方法名可以不帶括號(hào)
computed:{
? ? ? ? ? ?get:function handle(){
? ? ? ? ? ? ? ? return this.a;
},
}
簡(jiǎn)寫(xiě)：
computed:{
? ? ? ? ? handle() {
? ? ? ? ? ? ? return this.a;
},
}
七、 監(jiān)視、深度監(jiān)視、另一種寫(xiě)法、簡(jiǎn)寫(xiě)
1、監(jiān)視：當(dāng)data中的屬性或者computed計(jì)算屬性發(fā)生改變回調(diào)的方法。如果將immediate屬性改為true，則每次進(jìn)入頁(yè)面的時(shí)候自動(dòng)對(duì)該屬性進(jìn)行一次監(jiān)視。
data:{
? ? a:1,
},
watch:{
? ?a:{
? ? ?immediate：true,
? ? ? handler(newValue,oldValue){
? ? ? ? ? ? ?console.log("a發(fā)生改變了！")
? ? ? ? ? ? ? ? ?}
? ?}
}
2、 深度監(jiān)視：當(dāng)屬性是嵌套的對(duì)象，監(jiān)視屬性中的某個(gè)屬性變化，就是深度監(jiān)視
如
data:{
? ?a:{
? ? ?b:2,
? ? ?c:3,
? ? }
}
//1、此時(shí)要監(jiān)視a屬性中的b發(fā)生變化后的回調(diào)，則加引號(hào)，讀取對(duì)象a的b值
watch:{
? ?"a.b":{
? ? ? handler(newValue,oldValue){
? ? ? ? ? ? ?console.log("a的b發(fā)生改變了！")
? ? ? ? ? ? ? ? ?}
? ?}
}
//2、那如果是監(jiān)測(cè)a對(duì)象（a對(duì)象地址，即a={o:9}）發(fā)生改變的回調(diào)呢？
watch:{
? ?a:{
? ? ?immediate：true,
? ? ? handler(newValue,oldValue){
? ? ? ? ? ? ?console.log("a發(fā)生改變了！")
? ? ? ? ? ? ? ? ?}
? ?}
}
//3、那如果是監(jiān)測(cè)a對(duì)象中任一值發(fā)生改變的回調(diào)呢？答：將deep屬性改為true值。
watch:{
? ?a:{
? ? ?deep：true,
? ? ? handler(newValue,oldValue){
? ? ? ? ? ? ?console.log("a的某某值發(fā)生改變了！")
? ? ? ? ? ? ? ? ?}
? ?}
}
3、深度監(jiān)視：
? ? 【1】Vue中的watch默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變（只監(jiān)測(cè)一層）?
? ? 【2】加deep屬性，改為true值，watch可以檢測(cè)對(duì)象內(nèi)部值的改變（可以檢測(cè)對(duì)象多層嵌套層里面的值）
? ? 【3】但是，Vue自身是可以檢測(cè)到對(duì)象內(nèi)部多層數(shù)據(jù)的改變，只是Vue提供的watch屬性不允許。
4、監(jiān)視、深度監(jiān)視，還可以這樣寫(xiě)：
const vm=new Vue({
data:{
? ? a:1,
? ? ? ? }
});
vm.$watch(a,(
? ?handle(newValue,oldValue){
? ? ? console.log("a發(fā)生改變")? ??
? ? ? }
))
5、監(jiān)視的簡(jiǎn)寫(xiě)：當(dāng)只有handle回調(diào)，沒(méi)有immediate、deep等其他配置項(xiàng)的時(shí)候，監(jiān)視是可以像getter一樣監(jiān)視的
簡(jiǎn)寫(xiě)1：
?watch:{
? ? ? ?a(newValue,oldValue){
? ? ? ? ?console.log("a發(fā)生改變了！")??
? ? ? ? ?}? ??
}
簡(jiǎn)寫(xiě)2：
vm.$watch(a,function(newValue,oldValue){
? ?console.log("a發(fā)生改變了！")??
})
八、computed計(jì)算屬性和watch偵聽(tīng)
1、computed能辦到的，watch也能辦到，watch能辦到的computed不一定能辦到，比如，watch中可以寫(xiě)異步函數(shù)，computed中不能寫(xiě)異步函數(shù)
九、什么時(shí)候用箭頭函數(shù)
1、非Vue管理的函數(shù)（定時(shí)器、Promise、axios等回調(diào)函數(shù)），里面用箭頭函數(shù)，這樣用的this指向的是vm Vue實(shí)例或組件實(shí)例對(duì)象。
2、所有Vue管理的函數(shù)，最好寫(xiě)成普通函數(shù)
十、Vue偵聽(tīng)和watch偵聽(tīng)原理
1、一斑窺豹
【1】未添加setter和getter方法的對(duì)象打印出來(lái)是這樣的：
【2】添加setter和getter方法的對(duì)象打印出來(lái)是這樣的：
2、如果在對(duì)象本身上添加setter會(huì)造成n次遞歸，內(nèi)存溢出，所以封裝一個(gè)類(lèi)似Observer的構(gòu)造函數(shù)在另一人身上復(fù)刻屬性并添加setter和getter方法
[異常：RangeError: Maximum call stack size exceeded at Object.get [as name]
范圍錯(cuò)去:name屬性超過(guò)Object處的最大調(diào)用堆棧大小。
3、Vue封裝了一個(gè)遞歸查詢(xún)，可以找出對(duì)象嵌套多層中的對(duì)象，并為之添加setter和getter方法，直到最后不是對(duì)象類(lèi)型的數(shù)據(jù)為止，如數(shù)組、字符串、數(shù)字、Boolean、null、undefined等等。
4、 為所有哪怕深層嵌套的對(duì)象添加setter和getter之后，會(huì)將其拷貝到vm._data中，緊接著，將vm._data數(shù)據(jù)代理到vm自身上。實(shí)現(xiàn)Vue框架上的dom元素可實(shí)時(shí)獲取vm身上的數(shù)據(jù)。如{{information.name}}。
十一、從Vue偵聽(tīng)原理得出，往對(duì)象里添加新的屬性不具備響應(yīng)式，數(shù)組下標(biāo)對(duì)應(yīng)的數(shù)據(jù)也不具備響應(yīng)式。
問(wèn)題?一：
點(diǎn)擊按鈕，往對(duì)象a中添加一個(gè)屬性b，頁(yè)面不呈現(xiàn)b的值。是因?yàn)閂ue沒(méi)有偵聽(tīng)到b屬性，b屬性不具備getter和setter操作。
點(diǎn)擊之后，數(shù)據(jù)不呈現(xiàn)：
2、解決辦法：
【1】把a(bǔ)對(duì)象這個(gè)數(shù)據(jù)更新一遍，因?yàn)閍身上有g(shù)etter和setter：this.a={......}。
【2】用Vue自身上的set方法添加屬性：Vue.set(target,key,value)，前提是引入import Vue from vue。比如：Vue.set(a,'b','你很好真的很好！')。或者：this.$set(target,key,value)。效果一樣。
【3】注意不能再vm自身或者根目錄上，比如vm._data用set方法。
問(wèn)題二：刪除屬性,就是用對(duì)象的原生方法delete刪除屬性，也存在沒(méi)效果的問(wèn)題
解決辦法：用this.$delete(對(duì)象名，對(duì)象屬性),Vue.delete(對(duì)象名，對(duì)象屬性)，前提是引入import Vue from vue
問(wèn)題三：
同理，直接添加或者修改不被setter和getter的數(shù)組呢？
比如：對(duì)象里面放數(shù)組，數(shù)組里面對(duì)象，但凡對(duì)象都有setter和getter，那么中間一層的數(shù)組沒(méi)有setter二號(hào)getter，那么，直接改變數(shù)組的話，頁(yè)面不呈現(xiàn)改變后端信息！
解決辦法：
【1】用this.$set(persons,0,{id:"001},name:"馬老師"，age:50,sex:"男")
【2】用Vue封裝的操作數(shù)組：push()? pop()? shift(）?unshift()? splice()? sort()? reverse()
? ? ? ? <1>這些方法本質(zhì)做了兩件事：1、包裹Array原型鏈上的原生方法；2、重新解析解析模板進(jìn)而更新頁(yè)面。
十二、常用命令
1、v-bind? ? 語(yǔ)法糖——>“：”
2、v-model
3、v-if? ? ?v-else-if? ? v-else
4、v-on? 語(yǔ)法糖——>"@"
5、v-show
6、v-click? ? v-事件,指令遇到駝峰命名，改大寫(xiě)為-作為銜接符號(hào)，比如：v-caps-lock
?7、v-cloak ，后面不加屬性，表示當(dāng)vue接管dom容器的時(shí)候，刪除原來(lái)的帶v-cloak的dom，用于js阻塞情景，和css樣式結(jié)合使用：如overflow：hidden；
8、v-once
9、v-pre 后面不加屬性，加了該指令的dom不被解析，跳過(guò)解析，解析后面的dom
10、v-text 不解析標(biāo)簽
11、v-html? 能解析標(biāo)簽，存在安全隱患，容易收到XSS攻擊
十三、自定義指令
1、往vue實(shí)例中添加配置項(xiàng)（類(lèi)似于data mehods computed等）：directives:{}
【1】?jī)煞N形式：1、函數(shù)形式，2、對(duì)象形式。
【2】函數(shù)形式，傳入兩個(gè)參數(shù)（element，binding）
? ? ? >?element參數(shù)：是自定義指令所綁的dom元素，
?console.log（element）打印出來(lái)就是一個(gè)真實(shí)Dom元素。
? ? ? ?> binding參數(shù)：自定義指令可以綁定屬性，
比如<input v-fbind:value="name" type=“text”>。console.log（binding），打印出來(lái)就是一個(gè)對(duì)象，里面包含：表達(dá)式（綁定之后后面?zhèn)鬟M(jìn)去的東西，比如v-big="n+1+2"，那么表達(dá)式就是n+1+2）、自定義名稱(chēng)（big）、應(yīng)用于<template></? ?template>中的名稱(chēng)（v-big）?，最終dom元素v-big中獲得的值等 。最后通過(guò)函數(shù)把binding的value傳入dom元素。?
? ? ? ? >自定義指令，在兩種情況下發(fā)生調(diào)用：
1種，成功綁定時(shí)，（這個(gè)時(shí)候，還沒(méi)有掛載到頁(yè)面）
2種，data(){return{...}}下的屬性發(fā)生變化時(shí)，同事模板會(huì)重新解析
【3】對(duì)象形式
?2、自定義指令遇到定義名稱(chēng)為駝峰命名，使用指令名稱(chēng)用-銜接，例如lookYou,使用的時(shí)候是：
v-look-you。
3、directives配置項(xiàng)中的this指向的是window
4、配置全局指令：
Vue.directive("bind",{
函數(shù)形式或者對(duì)象形式的屬性
})
十四、mixin混合
1、建一個(gè)混入js文件：mixin.js，里面放一個(gè)對(duì)象并導(dǎo)出，里面放data、methods、mounted等配置項(xiàng)：
2、 再在組件中引入混合文件對(duì)象如：import {hunhe1,hunhe2} from './mixin.js'
3、通過(guò)mixins配置項(xiàng)
mixins:["hunhe1","hunhe2"]
十五、插件
vue中如何自定義指令directive_vue.directive binding.value 空_小聰_的博客-CSDN博客
1、創(chuàng)建js后綴文件，在里面創(chuàng)建一個(gè)對(duì)象并export導(dǎo)出，
2、對(duì)象中放install(Vue，option){}方法，參數(shù)Vue，就是方法中的可以獲取Vue構(gòu)造函數(shù)，Vue身上的方法屬性隨便用
3、install方法中可以寫(xiě)全局配置項(xiàng)目：
【1】全局Vue.filter("將調(diào)用的過(guò)濾名稱(chēng)",{......過(guò)濾動(dòng)作})
【2】自定義全局指令：Vue.directive(“名稱(chēng)”，function(element,bingding){......})
【3】全局混入：Vue.mixin({。。。。。})
【4】還可以：Vue.prototype."方法或者屬性名稱(chēng)"=。。。。
【5】在main.js中引入插件文件如 import plugin?from './plugin.js'(局部輸出加花括號(hào)并且引入名稱(chēng)由局部輸出的名稱(chēng)決定，默認(rèn)呼出，不加花括號(hào)，引入名稱(chēng)可以自定義)，再在下面Vue.use(plugin)?，
經(jīng)過(guò)上面的操作后，自定義的全局過(guò)濾器、全局指令、全局混入、方法、屬性，在所有組件中可以在dom元素中直接使用，vm實(shí)例下獲取：r如：this.x? //100。
十六、腳手架依托于webpack
1、獲取webpack的所有版本信息：
npm?view webpack versions
十七、mapState mapGatters
?十八、mapMutations? ?mapStations
?
3、namspaced:true?
十八、插槽
1、默認(rèn)插槽
2、具名插槽文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-666835.html
3、作用局插槽文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-666835.html
到了這里，關(guān)于Vue.js知識(shí)點(diǎn)學(xué)習(xí)的一點(diǎn)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
