export default 和export const

均用于從模塊導出函數、對象或原始值，區別在于：

export default：一個文件中只能有一個，為默認導出，在引用時指定名字。

export const：一個文件中有多個，為命名導出,普遍用于導出不變的值。

Map

const m = new Map();

m.set('key','value');

npm install 和 yarn install

npm install 在node.js下載時已一同安裝，yarn install需要另行下載安裝。兩個都是JS包的管理工具。yarn是為了解決npm的一些缺陷才出現的。

yarn優點：并行安裝、離線模式（已經安裝的包在緩存中獲取）、版本鎖定（解決包之間版本不兼容問題）、簡潔輸出

npm對比：依次安裝、運行輸出較多

vue 報錯 ReferenceError: exports is not defined

原因：webpack 2后不允許混合使用import 和module.exports。

修改方案：

1.統一改成es6寫法：export default XXX;

2.找到.babelrcf文件刪除transform-runtime。

es6的export方法

//1.基本用法（匿名函數加載）
export default function(){.......
}
?
import custName from '....';
custName();
//注意：import后不要跟{}，可以用任意名稱指向輸出方法
?
//2.用在非匿名函數前
export default function foo(){........
}
//或者寫成
function foo(){.......
}
export default foo;
//foo函數的名稱foo，在模塊外部是無效的，加載時視同匿名函數加載
?
//3.加不加default的區別
//-----------加-----------
export default function foo(){}
import foo from '...';
//----------不加----------
export function foo(){}
import {foo} from '...';
//export default用于指定模塊的默認輸出，顯然一個模塊只能有一個默認輸出，因此export default命令只能用一次，所以import命令后不加大括號，因為只可能唯一對應export default命令
?
//4.export default輸出有一個叫default的變量或方法，然后允許引用它的地方為他任意取名
export var a = 1;//success
export default 1；//success，本質是將后面的值賦值給default變量，所以可以直接將一個值寫在export default之后
export default var a = 1;//error，解釋:將變量a的值賦值給default，輸出對象不對，報錯
?
//5.導出匿名函數和非匿名函數可以混合使用
import aa,{foo} from '....';
?
//6.export default也可以用于輸出類
export default class {....}
import MyCalss from '....';
let aa = new MyClass();

聲明變量

js是弱類型語言，無需聲明可直接使用，默認是作為全局變量使用的。

var a = 1;
a = 1;
//兩種寫法，但是等效

webpack下載依賴的三種形式

dependencies

常用依賴，這些依賴最終都會構建到部署環境中。

devDependencies

開發中的依賴，比如eslint，包含一些線上包不適用的依賴

peerDependencies

目的是提示宿主環境去安裝滿足插件peerDependencies所指定依賴的包，然后在插件import或者require所依賴的包的時候，永遠都是引用宿主環境統一安裝的npm包，最終解決插件與所依賴包不一致的問題。

npm2 vs npm3

在npm2中，PackageA包中peerDependencies所指定的依賴會隨著npm install PackageA一起被強制安裝，所以不需要在宿主環境的package.json文件中指定對PackageA中peerDependencies內容的依賴。

但是在npm3中，npm3中不會再要求peerDependencies所指定的依賴包被強制安裝，相反npm3會在安裝結束后檢查本次安裝是否正確，如果不正確會給用戶打印警告提示。舉例，如果我們npm install PackageA安裝PackageA時，你會得到一個警告提示說：PackageB是一個需要的依賴，但是沒有被安裝。 這時，你需要手動的在MyProject項目的package.json文件指定PackageB的依賴。

同源窗口共享

sessionStorage用于臨時保存同一窗口（或標簽頁）的數據，在關閉窗口或標簽頁之后將會刪除數據，所以在不同的瀏覽器窗口數據是不共享的。但是，可以通過跳轉頁面實現兩個界面的數據共享

而localStorage和cookie則是在所有同源（協議、域名、端口一致）窗口中都是共享的。同時，數據共享必須在相同瀏覽器。

CSS transparent屬性

transparent代表全透明黑色，即rgba（0,0,0,0）。

CSS outline屬性

outline（輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

user agent stylesheet

User Agent Stylesheet（瀏覽器默認樣式）

User Agent Stylesheet屬于瀏覽器的默認樣式，如果不滿意該樣式最簡單的解決方案是重新設置該樣式，因為User Agent Stylesheet的優先級很低，可以被覆蓋。

element UI

element ui適用于vue2.0版本，element plus適用于vue3.0版本，所以它的底層開發語言也是vue3.0

MD5加密方式

MD5是一種信息摘要算法，它可以從一個字符串或一個文件夾中按照一定規則生成一個特殊的字符串。

特點：MD5算法不可逆，內容相同無論執行多少次md5生成結果始終是一致的，但是當文件有細微的變化，生成的md5會有非常大的不同。

流程：1.請求接口返回獲得加密類型、realm和隨機數

2.公安MD5的五次加密混淆

加密輪次	傳入數據	返回值
第一次加密	登錄密碼	pswd_0
第二次加密	登錄名、pswd_0	pswd_1
第三次加密	pswd_1	pswd_tmp
第四次加密	登錄名、realm、pswd_tmp	encryptedPassword
第五次加密	encryptedPassword、隨機數	signature（簽名）

3.第二次調用接口，傳入登錄名、signature（簽名）、隨機數、加密方式，調用成功返回token。

//生成token
export function getToken(params, quiet = false) {return new Promise(function(resolve, reject) {authorize(params, quiet).then(response => {//第二次調用接口，接口調用成功，返回tokenresolve(response.data);}).catch(Error => {//第一調用接口，接口狀態正常為401，返回三個參數//encryptType: "MD5"---加密類型//randomKey: "8354322330355776"--隨機數//realm: "6D1FC3CE5434F7AAC2BD35244722DC1E5F"//----------------------if (Error.response && Error.response.data.randomKey) {resolve(Error.response.data);} else if (Error.response) {tokenTools.setPSIToken('')reject(Error.response.data);} else {tokenTools.setPSIToken('')reject(Error);}});});
}

slot和slot-scope

vue插槽分為兩類：默認插槽（沒有名稱的插槽）和具名插槽（有名稱的插槽）。

???????<!--父組件-->
<template><div><h3>這是父組件</h3><son><span>實踐slot</span></son><son><template slot="myslot"><!--將template的內容插在子組件中--><div>實踐具名slot</div></template></son></div> 
</template>
?
<!--子組件-->
<template><div><h4>這是子組件</h4><input type="text" placeholder="請輸入"><slot></slot><!--name是插槽的名稱，具名插槽--><slot name="myslot"></slot></div>
</template>

slot-scope（作用域插槽）

注意：父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。即父組件不能直接使用子組件中定義的data數據，而slot-scope解決了這個問題。

???????<!--父組件-->
<template lang=""><div><h3>這是父組件</h3><son><!--slot將內容插入子組件，slot-scope獲取子組件的值--><template slot="myslot" slot-scope="scope"><ul><li v-for="item in scope.data">{{item}}</li></ul></template></son></div> 
</template>
?
<!--子組件-->
<template><div><h4>這是子組件</h4><input type="text" placeholder="請輸入"><slot name="myslot" :data='list'></slot></div>
</template><script>export default {name:'Son',data(){return{list:[{name:"Tom",age:15},{name:"Jim",age:25},{name:"Tony",age:13}]}}}
</script>
<!--子組件-->

首先，在子組件中的插槽上有一句data="list"，而在父組件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定義的，我們可以取任何名稱，但是data的值傳過來時是以對象形式傳輸的，所以在這scope.data才是list的值。

這樣我們就可以在父組件中取到子組件的值，并且加以應用了。

注意：v-slot是的簡寫形式#

v-slot，一種新的統一語法，替代具名插槽和默認插槽。

$slots和$scopedSlots

$slots

只讀屬性，用來訪問被插槽分發的內容。每個具名插槽有其相應的 property (例如：v-slot:foo 中的內容將會在 vm.$slots.foo 中被找到)。default property 包括了所有沒有被包含在具名插槽中的節點，或 v-slot:default 的內容。

請注意插槽不是響應性的。如果你需要一個組件可以在被傳入的數據發生變化時重渲染，我們建議改變策略，依賴諸如 props 或 data 等響應性實例選項。

注意：v-slot:foo 在 2.6 以上的版本才支持。對于之前的版本，你可以使用廢棄了的語法。

在使用渲染函數書寫一個組件時，訪問 vm.$slots 最有幫助。

$scopedSlots

只讀屬性，用來訪問作用域插槽。對于包括 默認 slot 在內的每一個插槽，該對象都包含一個返回相應 VNode 的函數。

vm.$scopedSlots 在使用渲染函數開發一個組件時特別有用。

注意：從 2.6.0 開始，這個 property 有兩個變化：

1. 作用域插槽函數現在保證返回一個 VNode 數組，除非在返回值無效的情況下返回 undefined。

2. 所有的 $slots 現在都會作為函數暴露在 $scopedSlots 中。如果你在使用渲染函數，不論當前插槽是否帶有作用域，我們都推薦始終通過 $scopedSlots 訪問它們。這不僅僅使得在未來添加作用域變得簡單，也可以讓你最終輕松遷移到所有插槽都是函數的 Vue 3.

Multiple root nodes returned from render function. Render function should return a single root node.

從呈現函數返回多個根節點。渲染函數應該返回一個根節點。

在Vue2中不允許<template>下有多個根節點存在，需要設置一個div將節點都包起來，在Vue3中則允許<template>標簽下有多個節點存在。