面試的時候經常被問到 響應式 相關的內容，而Vue3.0 更新后，面試官又有了新的武器；
面試官：為什么 Vue3.0 要重寫響應式系統？
懵逼樹上懵逼果，懵逼樹下你和我，面試官在問什么，我該怎么回答，完全不知道怎么回事；
有些經驗的小伙伴可能會從解釋 Proxy 的好處開始簡單聊一下，比如： Proxy 是直接代理對象，而不是劫持對象的屬性；更好的數組監控；
這樣的回答，勉強算是合格吧
那到底應該怎么答呢？
面試官背后的出題邏輯
別急，咱們先整理一下思路，孫子兵法有云：“知己知彼，百戰不殆”；面試就像打仗，你來我往，所以我們需要換位思考，想一想，為什么面試官會問這樣一個問題？面試官想從這個問題里得到什么回答？這個問題可以考察哪些技術點？ 想清楚這個問題，再回到自己身上，這些技術點，你都掌握了嗎？
說得直白一點，面試就像考試，你需要先 讀題、審題才能答好這道題；
為什么很多人認為 “面試造火箭，工作擰螺絲”？因為沒有換位思考，沒有想清楚面試題背后的邏輯；
那我們想清楚這個邏輯之后，需要我們做的就是提取技術點，整理思路，做出對應解答；當然，前提是你需要具備這些技術能力
那么接下來，我就嘗試拆解一下這個面試題了，提取其中的知識點。
對于你來說，就是要看看這些知識點，你都掌握了多少？
為什么 Vue3.0 要重寫響應式系統 ?
為什么重寫？如果之前好好的，重寫就沒有意義，那之前存在什么問題，現在是怎么解決的？就是關鍵點了；
不知道你對 Vue2.x 的響應式掌握多少，是不是欠下了技術的債呢？沒關系，我來幫你還債，先梳理 Vue2.x 的響應式；
其實基于這個面試題，背后還有很多技術點，上面這些，是與當前題目有直接關系的，實際面試中，很有可能基于這些技術點，在進行深入交流，這里就不擴展了，你能把現在這些問題理清楚，就算賺到了；
Vue2.x 響應式
其實關于這一點，在Vue 的官方文檔中，早已經有過說明了，而且說得非常詳細；官方文檔：https://cn.vuejs.org/v2/guide/reactivity.html
當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property，并使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因。
這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。這里需要注意的是不同瀏覽器在控制臺打印數據對象時對 getter/setter 的格式化并不同，所以建議安裝 vue-devtools 來獲取對檢查數據更加友好的用戶界面。
每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據 property 記錄為依賴。之后當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。
我們使用官方給的一張圖示，來梳理整個流程；
我們先來看一段代碼:
響應式原理
data 中的 obj 就是一個普通的 JavaScript 對象，通過點擊 Click 按鈕，將獲取到的隨機數賦值給 this.message ，而 this.message 指向的就是 data 中 obj 對象的 message 屬性；當message 發生數據改變時，頁面中 H1 標簽的內容會隨之改變，這個過程就是就是響應式的；那么Vue 是如何實現的呢？
首先，Vue 內部使用 Object.defineProperty() 將 Data 中的每一個成員都轉換為 getter / setter 的形式；getter 用來依賴收集，setter 用來派發更新；而模板內容，最終會被編譯為 render 函數，在 render 函數中，我們能發現 _v(_s(message)) message 被訪問了，就會觸發 getter 來進行依賴收集，而在代碼中的點擊事件中，一旦事件處理程序被觸發執行，那么 message 則會被修改，就會觸發 setter來進行派發更新；
雖然流程理清楚了，但是總感覺少點什么，怎么才能更通透呢？
我們用代碼來模擬整個的實現過程；
defineProperty 模擬代碼
defineProperty 的基本用法，直接看手冊就行了：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
我們來看看代碼：
<div id="app">
hello
</div>
<script>
// 模擬 Vue 中的 data 選項
let data = {
msg: 'hello'
}
// 模擬 Vue 的實例
let vm = {}
// 數據劫持：當訪問或者設置 vm 中的成員的時候，做一些干預操作
Object.defineProperty(vm, 'msg', {
// 可枚舉（可遍歷）
enumerable: true,
// 可配置（可以使用 delete 刪除，可以通過 defineProperty 重新定義）
configurable: true,
// 當獲取值的時候執行
get () {
console.log('get: ', data.msg)
return data.msg
},
// 當設置值的時候執行
set (newValue) {
console.log('set: ', newValue)
if (newValue === data.msg) {
return
}
data.msg = newValue
// 數據更改，更新 DOM 的值
document.querySelector('#app').textContent = data.msg
}
})
// 測試
vm.msg = 'Hello World'
console.log(vm.msg)
</script>
你沒有看錯，加上注釋，一共 36行代碼，這就是 Vue2.x 對響應式實現的整個流程；
繼續實現多個數據的響應式
<body>
<div id="app">
hello
</div>
<script>
// 模擬 Vue 中的 data 選項
let data = {
msg: 'hello',
count: 10
}
// 模擬 Vue 的實例
let vm = {}
proxyData(data)
function proxyData(data) {
// 遍歷 data 對象的所有屬性
Object.keys(data).forEach(key => {
// 把 data 中的屬性，轉換成 vm 的 setter/setter
Object.defineProperty(vm, key, {
enumerable: true,
configurable: true,
get () {
console.log('get: ', key, data[key])
return data[key]
},
set (newValue) {
console.log('set: ', key, newValue)
if (newValue === data[key]) {
return
}
data[key] = newValue
// 數據更改，更新 DOM 的值
document.querySelector('#app').textContent = data[key]
}
})
})
}
// 測試
vm.msg = 'Hello World'
console.log(vm.msg)
</script>
</body>
上面的代碼只是模擬了 響應式 的原理，但Vue在實現中，肯定不會那么簡單，接下來，我們看一下源碼呀……
Vue2 源碼解讀
首先找到響應式代碼的處理位置：
看完Vue2.x 響應式的代碼，我們再回過頭來思考最開始的問題，為什么 Vue3.0 要重寫響應式系統 ?
為什么重寫？如果之前好好的，重寫就沒有意義，那之前存在什么問題，換句話問就是 defineProperty 有什么問題？
Object.defineProperty 的問題
其實， defineProperty 的問題，在Vue2.x 的手冊中，已經說過了；“哎，很多人就是不看文檔啊”
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E6%95%B0%E7%BB%84
下面分別使用 Vue2 和 Vue3 實現了一個小功能，代碼一模一樣，功能當然也一樣，但是，在 Vue2 中就會有Bug，而運行在vue3中的，則沒有任何問題；
Vue2:
<template>
<div class="about">
<h1>This is an about page</h1>
<p v-for="(v, k) in users">
{{ v.names }}
</p>
<button @click="changes">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, names: "路飛-v2" },
{ id: 2, names: "鳴人-v2" },
],
};
},
methods: {
changes() {
// this.users[0] = {id:'0',names:'liuneng'}
// this.users[1].names = 'lnsdsdfg'
this.users[1] = { id: "1", names: "劉能-v2" };
},
},
};
</script>
<style lang="stylus" scoped></style>
Vue3:
<template>
<div class="about">
<h1>This is an about page</h1>
<p v-for="(v, k) in users">
{{ v.names }}
</p>
<button @click="changes">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, names: "路飛-v3" },
{ id: 2, names: "鳴人-v3" },
],
};
},
methods: {
changes() {
// this.users[0] = {id:'0',names:'liuneng'}
// this.users[1].names = 'lnsdsdfg'
this.users[1] = { id: "1", names: "劉能-v3" };
},
},
};
</script>
其核心點在于 defineProperty 不能很好的實現對數組下標的監控，而在 Vue2 的實現代碼中，沒有更好的方案對此進行改善，尤大索性直接放棄了實現；關于這個問題，尤大也在 github 做過回應，截個圖給大家看看；
那么，Vue 目前還沒有解決的問題，Vue3中顯然是已經解決的了，問題是，Vue3 是如何解決的呢？前面在 Vue3 的代碼中我們使用的是傳統的 Options Api 來實現的數據響應式， 而在 Vue3 中全新的 Composition Api 也實現了響應式系統，我們先來感受一下 Composition Api 的基礎用法
Composition API 的響應式系統
ref 響應式
<template>
<!-- 不需要.value -->
<button @click="addNu"> Composition API: {{nu}}</button>
</template>
<script>
// 引入 ref
import {ref} from "vue"
export default {
setup() {
// 定義 ref 響應式數據
const nu = ref(1);
// 定義函數
function addNu(){
nu.value++;
}
// 將數據和方法返回，即可在模板中直接使用
return {
nu,
addNu
};
},
};
</script>
reactive 響應式
<template>
<!-- 不需要.value -->
<button @click="addNu"> Composition API: {{nu}}</button>
<!-- reactive 響應式數據 -->
<h2>{{revData.name}}</h2>
<h3 @click="ageAdd">年齡：{{revData.age}}</h3>
<p v-for="(v,k) in revData.skill"> {{v}} </p>
</template>
<script>
// 引入 ref
import {reactive, ref} from "vue"
export default {
setup() {
// 定義 ref 響應式數據
const nu = ref(1);
// reactive 響應式數據
const revData = reactive({
name: '路飛',
age: 22,
skill:['橡膠機關槍','吃雞腿'],
})
function ageAdd(){
revData.age++
}
// 定義函數
function addNu(){
nu.value++;
}
// 將數據和方法返回，即可在模板中直接使用
return {
nu,
addNu,
revData,
ageAdd
};
},
};
</script>
Vue3 中的響應式是如何實現的呢？關鍵點在于Proxy 函數；
Proxy 實現原理
使用 Proxy 實現的響應式代碼，要比使用 defineProperty 的代碼簡單得多，因為 Proxy 天然的能夠對整個對象做監聽，而不需要對數據行遍歷后做監聽，同時也就解決了數組下標的問題；
我們來一段模擬代碼看一下：
<div id="app">
hello
</div>
<script>
// 模擬 Vue 中的 data 選項
let data = {
msg: 'hello',
count: 0
}
// 模擬 Vue 實例
const vm = new Proxy(data, {
// 執行代理行為的函數
// 當訪問 vm 的成員會執行
get (target, key) {
console.log('get, key: ', key, target[key])
return target[key]
},
// 當設置 vm 的成員會執行
set (target, key, newValue) {
console.log('set, key: ', key, newValue)
if (target[key] === newValue) {
return
}
target[key] = newValue
document.querySelector('#app').textContent = target[key]
}
})
// 測試
vm.msg = 'Hello World'
console.log(vm.msg)
</script>
