常見Vue原理面試題

1. Vue的響應式原理是什么？請詳細說明Object.defineProperty()和Proxy的區別和用法。

響應式原理：Vue中采用了數據劫持的方式，通過Object.defineProperty()函數來監聽數據變化，并在數據變化時觸發對應的更新函數。 Object.defineProperty()與Proxy的區別：前者只能監聽屬性的讀取和修改，后者可以監聽數組的變化等更多場景，且性能更高。


// 實現observe函數，對data對象中的所有屬性進行數據劫持
function observe(data) {if (!data || typeof data !== 'object') {return}Object.keys(data).forEach(key => {defineReactive(data, key, data[key])})
}// 定義defineReactive函數，通過Object.defineProperty()函數來監聽數據變化
function defineReactive(obj, key, val) {observe(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {console.log('get value:', val)return val},set: function reactiveSetter(newVal) {console.log('set value:', newVal)val = newVal}})
}// 測試代碼
const obj = { name: 'Tom', age: 18 }
observe(obj)
obj.age = 20
console.log(obj.age) // 輸出：20

2. Vue的模板編譯原理是什么？請說明它的優化策略和實現方式。并手動實現一個簡單的模板編譯器。

模板編譯原理：Vue中將用戶寫好的模板轉換成渲染函數，實際渲染時調用該函數進行渲染。模板編譯主要包括三個階段：解析、優化和生成。

優化策略：Vue在模板編譯階段會對模板進行靜態節點標記和靜態根節點標記，從而可以避免不必要的重復渲染和提升整體渲染性能。

實現方式：Vue通過將模板解析成抽象語法樹(AST)，再轉換成render函數的方式來實現模板編譯。最終生成的render函數就是一個虛擬DOM的描述對象，然后通過虛擬DOM的diff算法進行渲染更新。

// 簡化版的 Vue 模板編譯器
function compile(template) {var element = document.createElement('div');element.innerHTML = template;Array.from(element.childNodes).forEach(function(node) {if (node.nodeType === Node.TEXT_NODE) {var reg = /\{\{(.+)\}\}/;var match = node.textContent.match(reg);if (match) {var key = match[1].trim();node.textContent = '{{' + key + '}}';node._key = key;}} else if (node.nodeType === Node.ELEMENT_NODE) {Array.from(node.attributes).forEach(function(attr) {if (attr.name.startsWith('v-')) {if (attr.name === 'v-model') {node.value = '';node.addEventListener('input', function(event) {vm[attr.value] = event.target.value;});}node.removeAttribute(attr.name);}});}if (node.childNodes.length > 0) {compile(node.innerHTML);}});return element.innerHTML;
}var vm = new Vue({el: '#app',data: {message: 'Hello, World!'},template: '<div><h1>{{message}}</h1></div>'
});document.getElementById('app').innerHTML = compile(vm.template);

3. Vue中的虛擬DOM算法是什么？請說明其原理和優化策略。

虛擬DOM算法：Vue中通過比較新舊虛擬DOM樹之間的差異來最小化更新操作，從而提高渲染效率。虛擬DOM算法主要包括兩個步驟：Diff算法和更新操作。

原理：Vue將模板編譯成虛擬DOM樹，并將其與上一個虛擬DOM樹進行比較，找出需要更新的節點并進行更新操作。

優化策略：Vue采用了一些策略來減少比較的次數，優化了虛擬DOM樹的構建和比較的性能。


// 舊的虛擬DOM樹
const prevVNode = {tag: 'div',props: { id: 'container' },children: [{ tag: 'h1', children: 'Hello, World!' },{ tag: 'p', children: 'Welcome to my website.' }]
}// 新的虛擬DOM樹
const nextVNode = {tag: 'div',props: { id: 'container' },children: [{ tag: 'h1', children: 'Hello, Vue!' },{ tag: 'p', children: 'Welcome to the Vue world.' }]
}// 執行diff算法，得到需要更新的節點
function diff(prevVNode, nextVNode) {if (prevVNode.tag === nextVNode.tag) {const patchProps = {}const prevChildren = prevVNode.childrenconst prevProps = prevVNode.propsconst nextChildren = nextVNode.childrenconst nextProps = nextVNode.props// diff propsfor (const key in nextProps) {const prevVal = prevProps[key]const nextVal = nextProps[key]if (prevVal !== nextVal) {patchProps[key] = nextVal}}// diff childrenif (prevChildren.length !== nextChildren.length) {patchProps.children = nextChildren} else {const patchChildren = []for (let i = 0; i < nextChildren.length; i++) {const childPatch = diff(prevChildren[i], nextChildren[i])patchChildren.push(childPatch)}patchProps.children = patchChildren}return { type: 'update', props: patchProps }} else {return { type: 'replace', node: nextVNode }}
}// 執行更新操作，將差異應用到真實DOM樹上
function patch(node, patchProps) {switch (patchProps.type) {case 'replace':const newNode = createDOMElement(patchProps.node)node.parentNode.replaceChild(newNode, node)breakcase 'update':updateDOMProps(node, patchProps.props)for (const patchChild of patchProps.children) {patch(node.children[patchChild.index], patchChild.props)}break}
}

4. Vue中的組件通信有哪些方式？請分別說明它們的特點和應用場景。

組件通信方式：

父子組件通信：通過props傳遞數據和事件監聽。特點：簡單易用，適用于父子組件之間的數據交互。應用場景：父子組件之間的狀態傳遞和操作。
子父組件通信：通過 $emit 觸發自定義事件和 $on 監聽事件。特點：適用于子組件向父組件傳遞數據和狀態變更。應用場景：子組件向父組件傳遞用戶輸入或其他數據。
兄弟組件通信：通過$emit/ $on或vuex進行數據共享。特點：適用于兄弟組件之間的狀態共享和協同工作。應用場景：多個組件之間需要共享狀態或數據。
跨級組件通信：通過provide/ inject進行跨級數據傳遞。特點：適用于祖先組件向后代組件傳遞數據。應用場景：多級嵌套組件之間的狀態共享和傳遞。


// 子組件
<template><div><h1>{{ title }}</h1><button @click="handleClick">點擊我</button></div>
</template>
<script>
export default {props: ['title'],methods: {handleClick() {this.$emit('change', '子組件按鈕被點擊了')}}
}
</script>// 父組件
<template><div><h2>{{ subtitle }}</h2><child :title="title" @change="handleChange"></child></div>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child },data() {return {title: '父子組件通信示例',subtitle: ''}},methods: {handleChange(msg) {this.subtitle = msg}}
}
</script>

5. Vue中的v-model指令在表單元素上的使用方式有哪些？請分別說明它們的區別和注意事項。

v-model指令在表單元素上的使用方式：

v-model="value"：用于單選框、復選框和選擇框的數據綁定，綁定的是選擇的值。區別：單選框和復選框綁定的是選中狀態，而選擇框綁定的是選中的值。注意事項：當多個單選框或復選框綁定同一個數據時，需要為每個元素添加不同的value屬性。
v-model="value"：用于輸入框等表單元素的雙向數據綁定，綁定的是輸入框的值。區別：v-model與value屬性的實現方式不同，v-model實現了雙向綁定的效果。注意事項：需要為輸入框添加type屬性，并且該元素必須支持input事件或change事件。


// 單選框
<template><div><input type="radio" v-model="gender" value="male">男<input type="radio" v-model="gender" value="female">女</div>
</template>
<script>
export default {data() {return {gender: ''}}
}
</script>// 輸入框
<template><div><input type="text" v-model="message"><p>輸入的內容是：{{ message }}</p></div>
</template>
<script>
export default {data() {return {message: ''}}
}
</script>

6. Vue中的計算屬性computed和偵聽器watch有什么區別？請舉例說明它們的使用場景。

computed和watch的區別：

computed是基于依賴緩存的，只有當依賴的數據發生變化時才會重新計算；watch則是通過監聽數據變化來觸發回調函數。
computed適用于多個值之間的計算和處理，而watch則適用于單獨的數據變化后執行異步或復雜的操作。


// 計算屬性
<template><div><p>商品數量：{{ quantity }}</p><p>商品總價：{{ totalPrice }}</p></div>
</template>
<script>
export default {data() {return {price: 10,quantity: 3}},computed: {totalPrice() {return this.price * this.quantity}}
}
</script>// 偵聽器
<template><div><input type="text" v-model="message"><p>輸入的消息是：{{ message }}</p></div>
</template>
<script>
export default {data() {return {message: ''}},watch: {message(newVal, oldVal) {console.log('輸入的消息發生了變化：', newVal, oldVal)// 執行異步操作this.$http.get('/api/messages', { params: { message: newVal } }).then(res => {console.log(res.data)})}}
}
</script>

7. 簡述 Vue 中的異步更新隊列原理。

Vue 在更新視圖時會將所有數據變化的 watcher（觀察者）加入到一個異步更新隊列中，等到下一個事件循環時才執行更新操作。這樣做的好處是避免頻繁的更新視圖，提高性能。

在 watcher 對象構造函數中，將當前 watcher 對象 push 到全局的異步更新隊列 queue 中；
在下一個事件循環方式中，通過 flushQueue 函數逐個遍歷 queue 數組中的 watcher，調用其 run 方法進行更新；
清空 queue 數組，以待下一次更新。

// 定義全局異步更新隊列
var queue = [];// 異步更新隊列處理函數
function flushQueue() {queue.forEach(function(watcher) {watcher.run();});queue = [];
}// 定義 Watcher 類
class Watcher {constructor() {queue.push(this); // 將當前 watcher 加入到異步更新隊列中}run() {console.log('更新視圖！'); // 執行更新操作}
}// 創建多個 Watcher 對象
var watcher1 = new Watcher();
var watcher2 = new Watcher();// 延遲一定時間，再執行異步更新操作
setTimeout(function() {flushQueue(); // 清空異步更新隊列，逐個執行更新
}, 0);

8. 簡述 Vue 中的事件機制原理，并手動實現一個簡單的事件總線。

Vue 中的事件機制是利用事件總線 EventBus 進行封裝實現的。事件總線將事件的發送和接收解耦，通過一個中心化的事件分發器（Event Bus）來管理，使得多個組件間的通信變得簡單而靈活。

// 定義 EventBus 類
class EventBus {constructor() {this.events = {};}$on(name, callback) {if (!this.events[name]) {this.events[name] = [];}this.events[name].push(callback);}$emit(name, ...args) {if (this.events[name]) {this.events[name].forEach(function(callback) {callback(...args);});}}
}// 創建 EventBus 實例
var bus = new EventBus();// 定義事件處理函數
function handleMessage(message) {console.log(`收到消息：${message}`);
}// 綁定 message 事件處理函數
bus.$on('message', handleMessage);// 觸發 message 事件，并傳遞參數
bus.$emit('message', 'Hello, World!');