web前端面試重點難點問題

一、vue相關

Q：vue的底層原理？

A：Vue是採用數據劫持配合發佈者-訂閱者模式，通過Object.defineProperty來()來劫持各個屬性的getter和setter。

在數據發生變化的時候，發佈消息給依賴收集器，去通知觀察者，做出對應的回調函數去更新視圖。

---

Q：vue3.0的新特性？

A：

1.代碼結構更清晰
2.壓縮包體積更小
3.Object.defineProperty 替換爲es6的 Proxy。 將原本對對象屬性的操作變爲對整個對象的操作，可優化性增強
4.啓用 TypeScript 語法，大大的簡化了代碼

詳細參考：https://zhuanlan.zhihu.com/p/92143274

---

Q：vue中computed和watch的區別

A：computed是通過幾個數據的變化，來影響一個數據，而watch，則是一個數據的變化，去影響多個數據。

詳細參考：https://blog.csdn.net/u011423258/article/details/88641870

---

Q：vue裏data爲什麼是函數而不是對象

A：如果寫成對象，當組件被複用時，那麼多個組件實例就會共用同一個data對象，這樣改變其中一個實例的data，就會改變所有的。
因此寫成函數返回值的形式，使每個組件實例都擁有自己的私有數據空間，不會造成混亂。

vue官方解釋：https://cn.vuejs.org/v2/api/#data

---

Q：vue裏數組改變爲什麼有的會渲染，有的不會渲染

A：對用數組的變異方法（push、pop、sort等）進行數組操作時可以達到視圖的重新渲染，因爲vue對這些方法進行了包裹。
Vue 不能檢測以下數組的變動：

1. 利用索引直接設置一個數組項時
2. 修改數組的長度時

因爲這樣的操作vue根本沒法做一個Object.defineProperty處理。

解決方法：vm.$set(vm.items, indexOfItem, newValue)

vue官方說明：https://cn.vuejs.org/v2/guide/list.html#數組更新檢測

---

Q：update裏去改變data值會有問題嗎？

A：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用update鉤子。應避免在此期間更改狀態，否則可能導致死循環。

---

Q：加載數據在created好還是在mounted好，兩者區別？

A：

在created比較好，如果在mounted鉤子函數中請求數據可能導致頁面閃屏問題。
兩者區別：
created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

---

Q：vue通信的幾種方式

A：

1. props和$emit
2. $parent 和 $children （另有：$root：獲取根實例）
3. provide / inject
4. ref / refs
5. vuex（狀態管理器）
6. localstorage和sessionStorage

---

Q：vue單向數據流

A：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。

注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。

---

Q：vue虛擬DOM的作用

A：速度快，減小了頁面渲染過程的次數

詳細參考：https://www.jianshu.com/p/af0b398602bc

---

Q：vue服務端渲染

A：Vue.js 是構建客戶端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上完全可交互的應用程序。

vue官方文檔：https://ssr.vuejs.org/zh/

---

Q：vue項目性能優化

A：

參考：https://blog.csdn.net/q3254421/article/details/89193166

---

Q：vue中不用vuex如何實現在任意子組件都可以訪問一個全局的變量？

A：通過 $root 訪問根實例可實現。

vue官方說明：https://cn.vuejs.org/v2/guide/components-edge-cases.html#訪問根實例

---

二、js相關

Q：es5實現const變量申明方法

A：利用Object.defineProperty

function myConst (key, val) {
	window.key = val
	Object.defineProperty(window, key, {
		enumerable: false,
		configurable: false,
		get: function () {
			return val
		},
		set: function (value) {
			if (value !== val) {
				throw new TypeError('不能重複定義')
			} else {
				return val
			}
		}
	})
}

詳細參考：https://blog.csdn.net/weixin_34362875/article/details/87941318

---

Q：async/await 如何做異常處理

A：

參考：https://blog.csdn.net/q3254421/article/details/88878288

---

Q：對閉包的理解

A：閉包是這樣一種機制: 函數嵌套函數, 內部函數可以引用外部函數的參數和變量,參數和變量不會被垃圾回收機制所收回。
舉個簡單的例子：

function aa(){
  var num=10;
  function bb(){
    num++
    console.log(num);
  }
  return bb;
}
//bb(); //無法直接訪問函數內部的函數

aa()();//11
aa()();//11
aa()();//11

var closure = aa();
closure();//11
closure();//12
closure();//13

詳細參考：https://marco-hui.github.io/JavaScript-outline/guide/advanced/closure.html

---

Q：用過哪些ES6語法？

A：

1. 變量聲明：let、const
2. 解構賦值
3. 字符串擴展：includes、startsWith/endsWith、repeat(n)、字符串模板
4. 數組遍歷：for…of
5. 合併對象：Object.assign(obj1,obj2,…objN)
6. 箭頭函數
7. Symbol數據類型
8. Set集合
9. Map映射

詳細參考：https://marco-hui.github.io/JavaScript-outline/guide/advanced/es6.html

---

Q：這是一道考察面試者包含變量定義提升、this指針指向、運算符優先級、原型、繼承、全局變量污染、對象屬性及原型屬性優先級等知識的JavaScript綜合能力題。請看題：

function Foo() {
  getName = function () { alert (1); };
  return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
 
//請寫出以下輸出結果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

A：

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3

詳細解答：https://github.com/Wscats/articles/issues/85

---

其他問題

這些是開放性的問題，根據自己的實際與經驗回答

Q：開發過程需注意的地方？

Q：有在學習或瞭解什麼新的技術嗎？

Q：對自己的職業規劃？

Q：你在項目團隊中是什麼角色？

Q：項目開發中遇到哪些比較難的問題？