大部分來源於互聯網，本人僅做了總結！！！
js、H5、css部分
css部分
less特點：1. 變量 2. 混合（Mixins） 3. 嵌套規則 4. 運算 5. 函數 6. 命名空間 7. 作用域 8. 註釋 9. 導入（Import）
數據類型
1，介紹js的基本數據類型。
Undefined、Null、Boolean、Number、String
2，類型判斷用到哪些方法？
typeof
typeof xxx得到的值有以下幾種類型：undefined boolean number string object function、symbol ，比較簡單，不再一一演示了。這裏需要注意的有三點：
* typeof null結果是object ，實際這是typeof的一個bug，null是原始值，非引用類型
* typeof [1, 2]結果是object，結果中沒有array這一項，引用類型除了function其他的全部都是object
* typeof Symbol() 用typeof獲取symbol類型的值得到的是symbol，這是 ES6 新增的知識點
instanceof
用於實例和構造函數的對應。例如判斷一個變量是否是數組，使用typeof無法判斷，但可以使用[1, 2] instanceof Array來判斷。因爲，[1, 2]是數組，它的構造函數就是Array。同理：
function Foo(name) {
this.name = name
}
var foo = new Foo('bar’)
console.log(foo instanceof Foo) // true
3，JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？
棧：原始數據類型（Undefined，Null，Boolean，Number、String）
堆：引用數據類型（對象、數組和函數）
兩種類型的區別是：存儲位置不同；
（1）原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲；
（2）引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體
在參數傳遞方式上，原始類型是按值傳遞，引用類型是按共享傳遞
JS 中這種設計的原因是：按值傳遞的類型，複製一份存入棧內存，這類類型一般不佔用太多內存，而且按值傳遞保證了其訪問速度。按共享傳遞的類型，是複製其引用，而不是整個複製其值（C 語言中的指針），保證過大的對象等不會因爲不停複製內容而造成內存的浪費。
4，介紹js有哪些內置對象？
Object 是 JavaScript 中所有對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其他對象：Function、Arguments、Math、Date、RegEx、Error
5，如何區分數組和對象？
1、從原型入手，Array.prototype.isPrototypeOf(obj); 利用isPrototypeOf()方法，判定Array是不是在obj的原型鏈中，如果是，則返回true,否則false。Array.prototype.isPrototype([]) //true
2、也可以從構造函數入手，利用對向的constructor屬性
3、根據對象的class屬性(類屬性)，跨原型鏈調用toString()方法。Object.prototype.toString.call(Window);
4、Array.isArray()方法。
6，null，undefined 的區別？
console.log(null==undefined); //true 因爲兩者都默認轉換成了false
console.log(typeof undefined); //"undefined"
console.log(typeof null); //"object"
console.log(null===undefined); //false "==="表示絕對相等，null和undefined類型是不一樣的，所以輸出“false”
null表示沒有對象，即該處不應該有值
1） 作爲函數的參數，表示該函數的參數不是對象
2） 作爲對象原型鏈的終點
undefined表示缺少值，即此處應該有值，但沒有定義
1）定義了形參，沒有傳實參，顯示undefined
2）對象屬性名不存在時，顯示undefined
3）函數沒有寫返回值，即沒有寫return，拿到的是undefined
4）寫了return，但沒有賦值，拿到的是undefined
null和undefined轉換成number數據類型
null 默認轉成 0
undefined 默認轉成 NaN
數組和對象有哪些原生方法，列舉一下？
數組的常用方法：
|
方法 |
說明 |
|
slice() 數組對象.slice(start,end) |
獲取數組中的某段數組元素 |
|
unshift() 數組對象.unshift(新元素1,新元素2,…,新元素n); |
在數組開頭添加元素 |
|
push() 數組對象.push(新元素1,新元素2,…,新元素n); |
在數組末尾添加元素 |
|
shift() 數組對象.shift(); |
刪除數組中第一個元素 |
|
pop() 數組對象.pop(); |
刪除數組最後一個元素 |
|
toString() 數組對象.toString() |
將數組轉換爲字符串 |
|
join() 數組對象.join("分隔符") |
將數組元素連接成字符串 |
|
concat() 數組1.concat(數組2,數組3,…,數組n) |
多個數組連接爲字符串concat，就是“合併”的意思。 |
|
sort() 數組對象.sort(函數名) |
數組元素正向排序 |
|
reverse() 數組對象.reverse(); |
數組元素反向排序 |
對象的常用方法
obj.assign(),
字符串有哪些原生方法，列舉一下？
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
concat() 連接字符串。
indexOf() 檢索字符串。
match() 找到一個或多個正則表達式的匹配。
replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片斷，並在新的字符串中返回被提取的部分。
split() 把字符串分割爲字符串數組。
toLocaleLowerCase() 把字符串轉換爲小寫。
toLocaleUpperCase() 把字符串轉換爲大寫。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
null和undefined的區別
null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。
== 和 === 的區別
1.===：三個等號我們稱爲等同符，當等號兩邊的值爲相同類型的時候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值類型不同時直接返回false。
例：
100===“100” //返回false
abc===“abc” //返回false
‘abc’===“abc” //返回true
NaN===NaN //返回false
false===false //返回true
2.==：兩個等號我們稱爲等值符，當等號兩邊的值爲相同類型時比較值是否相同，類型不同時會發生類型的自動轉換，轉換爲相同的類型後再作比較。
類型轉換規則：
1）如果等號兩邊是boolean、string、number三者中任意兩者進行比較時，優先轉換爲數字進行比較。
2）如果等號兩邊出現了null或undefined,null和undefined除了和自己相等，就彼此相等
例：
100==“100” //返回true
1==true //返回true
“1”==“01” //返回false，此處等號兩邊值得類型相同，不要再轉換類型了！！
NaN==NaN //返回false，NaN和所有值包括自己都不相等。
關於變量和常量
let
let 用來聲明變量，類似於變量，但是所聲明的變量，只在let命令所在的代碼塊內有效
需要注意的地方：
1.不存在變量提升，未聲明直接報錯
2.暫時性死區
3.for循環具有兩個作用域，外面的變量和裏面的變量互不干擾
const
用來聲明一個只讀的常量，一旦尚明，常量的值就不可以改變了，而且聲明的時候必須賦值
需要注意的地方：
引用類型儲存的是一個地址，所以用const聲明的引用數據類型，只要不改變指針地址，就可以
如果爲常量賦其他的值，就會報錯。
數組的深拷貝
const a1 = [1,2];
1.const a2 = [...a1];
2.const [...a2] = a1;
關於本地存儲和會話存儲
常用瀏覽器存儲方案有，cookie，session，localstorage，sessionstroage，區別在於：
1.方式： cookie通過請求頭髮送，在瀏覽器與服務器之間來回傳遞，sessionStroage與 localStroage不會把數據發給服務器，僅在本地保存
2.存儲量：cookie存儲量小，一般在4到8kb,其餘存儲量大5M
3.數據有效期不同，
sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保存
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據
cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
4.作用域
sessionStorage不能在不同的瀏覽器窗口中共享，即使是同一個頁面；
localStorage 在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的。
關於異步處理：Generator async promise 的區別
詳細理解：https://www.jianshu.com/p/f17d577f677e
移動端適配的技術方案：
（1）通過媒體查詢的方式即CSS3的meida queries
（2）以天貓首頁爲代表的 flex 彈性佈局
（3）以淘寶首頁爲代表的 rem+viewport縮放 （推薦）
（4）rem 方式（推薦）
詳細參考：https://blog.csdn.net/chenjuan1993/article/details/81710022
ES6常用特性
變量定義(let和const,可變與不可變，const定義對象的特殊情況)
解構賦值
模板字符串
數組新API(例：Array.from(),entries(),values(),keys())
箭頭函數(rest參數，擴展運算符，::綁定this)
特點：箭頭函數中的this始終指向箭頭函數定義時的離this最近的一個函數，如果沒有最近的函數就指向window。
1不能作爲構造函數，不能使用new
2不能使用argumetns,取而代之用rest參數...解決
3不綁定this，會捕獲其定義時所在的this指向作爲自己的this。由於在vue中自動綁定 this 上下文到實例中，因此不能使用箭頭函數來定義一個週期方法。箭頭函數的this永遠指向上下文的this，call、apply、bind也無法改變
4箭頭函數沒有原型對象
箭頭函數其實只是一個匿名函數的語法糖，區別在於普通函數作用域中的this有特定的指向，一般指向window，而箭頭函數中的this只有一個指向那就是指當前函數所在的對象，其實現原理其實就是類似於之前編程的時候在函數外圍定義that一樣，用了箭頭函數就不用定義that了直接使用this
參考：https://www.jianshu.com/p/73cbeb6782a0
Set和Map數據結構(set實例成員值唯一存儲key值，map實例存儲鍵值對(key-value))
（1） Set 類似於數組，但數組可以允許元素重複，Set 不允許元素重複
（2）Map 類似於對象，但普通對象的 key 必須是字符串或者數字，而 Map 的 key 可以是任何數據類型
Promise對象(前端異步解決方案進化史，generator函數，async函數)
Class語法糖(super關鍵字)
總結前端性能優化的解決方案
https://segmentfault.com/a/1190000022205291
優化的方向有兩個：
減少頁面體積，提升網絡加載
優化頁面渲染
減少頁面體積，提升網絡加載
靜態資源的壓縮合並（JS 代碼壓縮合並、CSS 代碼壓縮合並、雪碧圖）
靜態資源緩存（資源名稱加 MD5 戳）
使用 CDN 讓資源加載更快
優化頁面渲染
CSS 放前面，JS 放後面
懶加載（圖片懶加載、下拉加載更多）
減少DOM 查詢，對 DOM 查詢做緩存
減少DOM 操作，多個操作儘量合併在一起執行（DocumentFragment）
事件節流
儘早執行操作（DOMContentLoaded）
使用 SSR 後端渲染，數據直接輸出到 HTML 中，減少瀏覽器使用 JS 模板渲染頁面 HTML 的時間
Ajax原理
(1)創建對象
var xhr = new XMLHttpRequest();
(2)打開請求
xhr.open('GET', 'example.txt', true);
(3)發送請求
xhr.send(); 發送請求到服務器
(4)接收響應
xhr.onreadystatechange =function(){}
(1)當readystate值從一個值變爲另一個值時，都會觸發readystatechange事件。
(2)當readystate==4時，表示已經接收到全部響應數據。
(3)當status ==200時，表示服務器成功返回頁面和數據。
(4)如果(2)和(3)內容同時滿足，則可以通過xhr.responseText，獲得服務器返回的內容。
淺拷貝和深拷貝
jQuery.extend第一個參數可以是布爾值，用來設置是否深度拷貝的
jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } );
最簡單的深拷貝
aa = JSON.parse( JSON.stringify(a) )
淺複製--->就是將一個對象的內存地址的“”編號“”複製給另一個對象。深複製--->實現原理，先新建一個空對象，內存中新開闢一塊地址，把被複制對象的所有可枚舉的(注意可枚舉的對象)屬性方法一一複製過來，注意要用遞歸來複制子對象裏面的所有屬性和方法，直到子子.....屬性爲基本數據類型。總結，深複製理解兩點，1,新開闢內存地址，2,遞歸來刨根複製。
事件冒泡和事件捕捉 https://blog.csdn.net/qq_40510139/article/details/89320892
閉包 https://blog.csdn.net/qq_40510139/article/details/78825156
div上下左右居中
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
參考：https://blog.csdn.net/qq_36658051/article/details/81985024
js面試題擴展：https://www.jianshu.com/p/f1f39d5b2a2e
js設計模式：
https://www.cnblogs.com/imwtr/p/9451129.html
HTTP協議：
https://www.cnblogs.com/123blog/articles/10297650.html
vue部分
重中之重、Vue的雙向數據綁定原理是什麼？
實現數據綁定的做法有大致如下幾種：
- 發佈者-訂閱者模式（backbone.js）
- 髒值檢查（angular.js）
- 數據劫持（vue.js）
答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
已經瞭解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，達到監聽數據變動的目的。
要實現mvvm的雙向綁定，就必須要實現以下幾點：
1、實現一個數據監聽器Observer，遍歷data中的屬性，使用 Object.defineProperty 的get/set方法對其進行數據劫持，達到監聽數據變動的目的，如有變動可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，作爲連接Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
4、mvvm入口函數，整合以上三者
詳細理解：https://www.jianshu.com/p/f194619f6f26
provide/inject的學習
https://segmentfault.com/a/1190000014095107?utm_source=tag-newest
一、什麼是MVVM？
MVVM是Model-View-ViewModel的縮寫。MVVM是一種設計思想。Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。
在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人爲干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，複雜的數據狀態維護完全由 MVVM 來統一管理。
二、mvvm和mvc區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
三、vue的優點是什麼？
低耦合。視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可重用性。你可以把一些視圖邏輯放在一個ViewModel裏面，讓很多view重用這段視圖邏輯。
獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計。
可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
四、 組件之間的傳值？（重點）
1.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數據;
子組件傳給父組件：$emit方法傳遞參數
2.非父子組件間的數據傳遞，兄弟組件傳值
eventBus，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有不少人推薦直接用VUEX，具體來說看需求咯。技術只是手段，目的達到纔是王道。）
父子組件互相調用方法
父組件中定義好了方法 hello()，在子組件中直接用：this.$parent.hello()；
父組件調用子組件的方法：this.$refs.pass.fn1;
vue-router基本原理：（重點）
vue-router通過hash與History interface兩種方式實現前端路由，更新視圖但不重新請求頁面。
主要有兩種方式：
1、hash ---- 利用URL中的hash（“#”）
2、利用History interface在 HTML5中新增的方法,
詳細理解：https://www.jianshu.com/p/4295aec31302
七、vue如何實現按需加載配合webpack設置
webpack中提供了require.ensure()來實現按需加載。以前引入路由是通過import 這樣的方式引入，改爲const定義的方式進行引入。
不進行頁面按需加載引入方式：import home from '../../common/home.vue'
進行頁面按需加載的引入方式：
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
八、vuex面試相關（重點）
（1）vuex是什麼？怎麼使用？哪種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。新建一個目錄store，…… export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
（2）vuex有哪幾種屬性？
工作原理：
通過官方文檔提供的流程圖我們知道，vuex的工作流程，
1、數據從state中渲染到頁面；
2、在頁面通過dispatch來觸發action；
3、action通過調用commit,來觸發mutation；
4、mutation來更改數據，數據變更之後會觸發dep對象的notify，通知所有Watcher對象去修改對應視圖（vue的雙向數據綁定原理）。
（3）不用Vuex會帶來什麼問題？
可維護性會下降，想修改數據要維護三個地方；
可讀性會下降，因爲一個組件裏的數據，根本就看不出來是從哪來的；
增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是爲了減少耦合，現在這麼用，和組件化的初衷相背。
詳細理解：https://www.jianshu.com/p/1fdf9518cbdf
九、 v-show和v-if指令的共同點和不同點
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果
十二、Vue中引入組件的步驟?
1）採用ES6的import … from …語法或CommonJS的require()方法引入組件
2）對組件進行註冊,代碼如下
十三、如何讓CSS只在當前組件中起作用?
將當前組件的<style>修改爲<style scoped>
十四、在Vue中使用插件的步驟
採用ES6的import … from …語法或CommonJSd的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
十五、請列舉出3個Vue中常用的生命週期鉤子函數
created: 實例已經創建完成之後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, el屬性目前還不可見mounted:el被新創建的vm. el屬性目前還不可見mounted : el被新創建的 vm.el屬性目前還不可見mounted:el被新創建的vm.el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
activated: keep-alive組件激活時調用
十六、active-class是哪個組件的屬性？
vue-router模塊的router-link組件。
十九、生命週期相關面試題
總共分爲8個階段：
beforeCreate（創建前） 在數據觀測和初始化事件還未開始
created（創建後） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來
beforeMount（載入前） 在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後） 在el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後） 在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前） 在實例銷燬之前調用。實例仍然完全可用。
destroyed（銷燬後） 在實例銷燬之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
（1）、什麼是vue生命週期
答： Vue 實例從創建到銷燬的過程，就是生命週期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命週期。
（2）、vue生命週期的作用是什麼
答：它的生命週期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
（3）、vue生命週期總共有幾個階段
答：可以總共分爲8個階段：創建前/後, 載入前/後,更新前/後,銷燬前/銷燬後
（4）、第一次頁面加載會觸發哪幾個鉤子
答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
（5）、DOM 渲染在 哪個週期中就已經完成
答：DOM 渲染在 mounted 中就已經完成了。
（6）、簡單描述每個週期具體適合哪些場景
答：生命週期鉤子的一些使用方法：
beforecreate : 可以在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點
updated : 如果對數據統一處理，在這裏寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 等到整個視圖都渲染完畢，纔會執行 vm.$nextTick
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
詳細原理請看：https://www.jianshu.com/p/69d447321740
二十、說出至少4種vue當中的指令和它的用法？
v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
二十二、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：先裝css-loader、node-loader、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：在同一個文件，配置一個module屬性
第四步：然後在組件的style標籤加上lang屬性 ，例如：lang=”scss”
特性:
可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套
二十四、爲什麼避免 v-if 和 v-for 用在一起
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重複遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。
vue中修改了數據但視圖無法更新的情況
參考：https://blog.csdn.net/github_38771368/article/details/77155939