當(dāng)做學(xué)習(xí)筆記小本本的,大部分不是原創(chuàng),只是記錄,會(huì)在最后貼參考文章和作者

1....通配符

引用

props:{
 ...FormItem.props, //獲取FormItem組件內(nèi)props內(nèi)的所有值
 action: {
 type: String,
 default: '/puzzle/image/upload'
 },
}

4.3 Use array spreads ... to copy arrays.

使用擴(kuò)展符來(lái)復(fù)制數(shù)組

// bad
const len = items.length;
const itemsCopy = [];
let i;
?
for (i = 0; i < len; i += 1) {
 itemsCopy[i] = items[i];
}
?
// good
const itemsCopy = [...items];

同object.assign方法

//object.assign方法 第一個(gè)參數(shù):默認(rèn)的賦值對(duì)象 參數(shù)2:如果有個(gè)性化定制,就賦值這個(gè)覆蓋參數(shù)1
    const finalConfig=Object.assign(basicConfig,config)
    //es6寫(xiě)法
    const finalConfig={...basicConfig,...config}

2.props中可傳值的類(lèi)型為多選,寫(xiě)為數(shù)組形式

 * 指定上傳圖片寬度
 * 如果入?yún)镹umber, 則圖片寬度必須等于width
 * 如果入?yún)閿?shù)組, [min, max], 則圖片 min <= width <= max
 * 否則上傳失敗并提示
 */
disabled: {    
 type: Boolean,
},
width: [Number, Array],
 // 指定上傳圖片高度
height: [Number, Array],
maxSize: Number,

3.父子組件通訊的方式(除去事件)

v-model

v-model 是vue的語(yǔ)法糖，完全寫(xiě)法是觸發(fā)input事件，通過(guò)value屬性實(shí)現(xiàn)父子傳值，子級(jí)設(shè)置props中接收value,就可以使用

//父級(jí)
<child v-model="something"></child>
<child
 v-bind:value="something"
 v-on:input="something = $event.target.value">
</child>

//子級(jí)
props:{
 value:{
 type: String
 }
}
//傳值時(shí)直接觸發(fā)input方法
 this.$emit('input', url);

.sync

在父級(jí)引用的子級(jí)中注冊(cè)屬性名加.sync，父級(jí)得到的valueChild就是從子級(jí)傳過(guò)來(lái)的值。

<child :show.sync='valueChild'></child>

在子級(jí)中觸發(fā)update事件來(lái)傳值，寫(xiě)法 update:設(shè)置的屬性名

this.$emit('update:show', false); //觸發(fā) input 事件，并傳入新值

可用場(chǎng)景

當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí)，這個(gè)變化也會(huì)同步到父組件中所綁定。

4.可替代過(guò)濾器寫(xiě)法

使用computed過(guò)濾計(jì)算數(shù)據(jù)，返回模板字符串。

maxSize accept 都是從組件的props里獲取到的，是從外層傳入的數(shù)據(jù)。

computed: {    
 fileName() {
 return this.value && this.value.split('/').pop();
 },
 sizeLimitDesc() {
 if (!this.maxSize) {
 return '大小: 無(wú)限制';
 }
 return `大小: ${this.maxSize}KB以?xún)?nèi)`;
 },
 typeLimitDesc() {
 if (!this.accept) {
 return '格式: 無(wú)限制'; 
 }
 if (this.accept === 'image/*') {
 return '格式: 支持圖片類(lèi)型, 包括jpg, png, gif, svg等';
 }
 return `格式: 支持${this.accept.replace(/image\//g, '')}`;
 }
}

5.關(guān)于Promise

Promise對(duì)象有三種狀態(tài)：pending(進(jìn)行中)、resoleved(fulfilled,已完成)、rejected(已失敗)，根據(jù)異步操作的結(jié)果決定處于何種狀態(tài)。一旦狀態(tài)改變就不可再變，狀態(tài)改變僅有兩種pending=>rejected、pending=>resolved。

Promise實(shí)例

function timeout(ms) {
 return new Promise((resolve, reject) => {
 setTimeout(resolve, ms, 'done');
 });
 }

 timeout(100).then((value) => {
 console.log(value);
 }); //done

一般Promise中用于進(jìn)行異步操作，網(wǎng)絡(luò)請(qǐng)求、圖片加載的onload方法等等。

在實(shí)際寫(xiě)項(xiàng)目中，我是因?yàn)樵赑romise中做了異步操作，這些異步操作在得到數(shù)據(jù)后才會(huì)執(zhí)行then()方法，比較方便。

Promise 接受兩個(gè)參數(shù)：resolve和reject。這是兩個(gè)由JavaScript引擎自動(dòng)提供的函數(shù)，不用自己部署。

resolve();

resolve函數(shù)在異步操作成功時(shí)調(diào)用，作用是將Promise對(duì)象的狀態(tài)由pending變?yōu)閞esolved，并將異步操作的結(jié)果傳遞出去。

reject();

reject函數(shù)在異步操作失敗時(shí)調(diào)用，作用是將Promise對(duì)象的狀態(tài)由pending變?yōu)閞eject，將異步操作報(bào)錯(cuò)傳遞出去。

then();

Promise對(duì)象可以調(diào)用的一個(gè)回調(diào)函數(shù)，會(huì)返回一個(gè)Promise對(duì)象。前一個(gè)then方法的返回值作為后一個(gè)then方法的參數(shù)：

let func = function() {
 return new Promise((resolve, reject) => {
 resolve('返回值');
 });
};
?
let cb = function() {
 return '新的值';
}
//第一個(gè)then return出“新的值”作為下一個(gè)then方法傳入的參數(shù)
func().then(function () {
 return cb();
}).then(resp => {
 console.warn(resp);
 console.warn('1 =========<');
});
//打印結(jié)果
//新的值
//1 ==========<
?
//第一個(gè)then方法只是調(diào)用cb()方法，沒(méi)有return值給下一個(gè)then，所以是undefined
func().then(function () {
 cb();
}).then(resp => {
 console.warn(resp);
 console.warn('2 =========<');
});
//打印結(jié)果
//undefined
//2 ===========<

then方法也接收兩個(gè)參數(shù)，成功或失敗時(shí)調(diào)用的方法，一般只寫(xiě)一個(gè)成功時(shí)調(diào)用的方法，因?yàn)椴怀晒梢灾苯诱{(diào)用Promise對(duì)象的.catch方法

catch();

//以下兩種方法不等價(jià)
somePromise().then(function(){
 return someOtherPromise();
 }).catch(function(err){
 //error
 });
 ///////////////////////////////
 somePromise().then(function(){
 return someOtherPromise();
 },function(err){
 //error
 });

6.async await

因?yàn)橛玫搅薖romise，百度說(shuō)用async函數(shù)和Promise一起食用更佳。

async就是異步的意思，所以是來(lái)處理異步操作的，我組里的大佬都是用這個(gè)寫(xiě)函數(shù)前面來(lái)做網(wǎng)絡(luò)請(qǐng)求的。

大概長(zhǎng)這樣：

//這是個(gè)上傳圖片做網(wǎng)絡(luò)請(qǐng)求的函數(shù) 
async handleUpload(options) {
 const fd = new FormData();
 fd.append('file', options.file);
 const config = {
 headers:{ 'Content-Type':'multipart/form-data' }
 };
 const url = await this.$request.post('/puzzle/image/upload', fd, config);
 //v-model給父級(jí)傳數(shù)據(jù) 觸發(fā)input方法 相當(dāng)于修改了props中的數(shù)據(jù)
 this.$emit('input', url);
 },

async怎么用捏：

它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。

寫(xiě)一個(gè)async函數(shù)：

async function timeout() {
 return 'hello world'
}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');
console.log(timeout())

打印結(jié)果：

image

打印timeout(); 發(fā)現(xiàn)async函數(shù)返回的是一個(gè)promise對(duì)象，只要是Promise對(duì)象就可以使用then catch方法，嘿嘿又get到了一個(gè)東東。

await怎么用捏：

// 只能在async函數(shù)內(nèi)部使用
let value = await promise

關(guān)鍵詞await可以讓JavaScript進(jìn)行等待，直到一個(gè)promise執(zhí)行并返回它的結(jié)果，JavaScript才會(huì)繼續(xù)往下執(zhí)行。

7.try/catch/finally

try語(yǔ)句允許我們定義在執(zhí)行時(shí)進(jìn)行錯(cuò)誤測(cè)試的代碼塊。

catch 語(yǔ)句允許我們定義當(dāng) try 代碼塊發(fā)生錯(cuò)誤時(shí)，所執(zhí)行的代碼塊。

finally 語(yǔ)句在 try 和 catch 之后無(wú)論有無(wú)異常都會(huì)執(zhí)行。

注意： catch 和 finally 語(yǔ)句都是可選的，但你在使用 try 語(yǔ)句時(shí)必須至少使用一個(gè)。

提示： 當(dāng)錯(cuò)誤發(fā)生時(shí)， JavaScript 會(huì)停止執(zhí)行，并生成一個(gè)錯(cuò)誤信息。使用 throw 語(yǔ)句 來(lái)創(chuàng)建自定義消息(拋出異常)。如果你將 throw 和 try 、 catch一起使用，就可以控制程序輸出的錯(cuò)誤信息。

一個(gè)try和catch一起寫(xiě)：

 try {
 //這里getImageWidthHeight是一個(gè)異步操作。使用了Promise，await等待他返回一個(gè)Promise對(duì)象后，擁有了then catch等方法
 //這里的try 就相當(dāng)于 this.getImageWidthHeight(file).then(()=>{}) 可以在try中測(cè)試，做成功狀態(tài)操作
 const { width, height } = await this.getImageWidthHeight(file);
 } 
catch (e) {
 //catch相當(dāng)于this.getImageWidthHeight(file).catch(()=>{}) 本來(lái)就用于做捕捉錯(cuò)誤代碼，可以用來(lái)寫(xiě)失敗狀態(tài)操作
 this.$notify.error('圖片寬高獲取失敗');
 return false;
 }

拋出錯(cuò)誤例子：

 async checkImage(file) {
 if (...) {
 throw new Error();
 }
 return true;
 },

8.Vue.nextTick();

定義：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

數(shù)據(jù)更新，DOM渲染后立即執(zhí)行的函數(shù)

使用場(chǎng)景

1.如果是需要在created函數(shù)中做的DOM操作，一定要放在nextTick中，因?yàn)閏reated時(shí)data和methods剛加載完畢，DOM還未渲染。

2.想在數(shù)據(jù)更新后立即獲取到更新的那個(gè)DOM節(jié)點(diǎn)做DOM操作，就可以使用，因?yàn)橐话悴荒芰⒓传@取到更新后的DOM。

3.在使用某個(gè)第三方插件時(shí) ，希望在vue生成的某些dom動(dòng)態(tài)發(fā)生變化時(shí)重新應(yīng)用該插件。

9.判斷元素是否是數(shù)組

1，通過(guò) constructor 判斷

function isArray(value) {
 return value && typeof value == 'object' && value.constructor === Array
}

2，通過(guò) instanceof 判斷判斷

function isArray(value) {
 return value && typeof value == 'object' && value instanceof Array
}

本周收藏的文章:

一些ES6數(shù)組方法的妙用,這里只有一篇redues的,作者寫(xiě)的好詳細(xì)好棒哦 收藏一下 好像其他文章還有別的方法:
http://www.itdecent.cn/p/541b84c9df90
一些高級(jí)的遍歷數(shù)組方法:
https://juejin.im/post/5d48c275f265da03b12032a1
一些好用的封裝方法,不用自己百度了嘻嘻,提升開(kāi)發(fā)幸福感的10條JS技巧:
https://juejin.im/post/5d3e96696fb9a07ea420c71c
前端技能樹(shù),好強(qiáng),大部分都不會(huì),爭(zhēng)取以后把這些技能點(diǎn)上:
https://juejin.im/post/5cc1da82f265da036023b628#heading-43
Promise初階高階,高階的一些沒(méi)用到過(guò),還沒(méi)看完,以上周記里有些是參考這篇:
https://blog.csdn.net/weixin_33811539/article/details/89078776