面試的時候經常被問到 響應式 相關的內容，而Vue3.0 更新后蚣驼，面試官又有了新的武器羔砾；
面試官：為什么 Vue3.0 要重寫響應式系統(tǒng)负间？
懵逼樹上懵逼果，懵逼樹下你和我姜凄，面試官在問什么政溃，我該怎么回答，完全不知道怎么回事态秧；
有些經驗的小伙伴可能會從解釋 Proxy 的好處開始簡單聊一下董虱，比如： Proxy 是直接代理對象，而不是劫持對象的屬性申鱼；更好的數(shù)組監(jiān)控愤诱；
這樣的回答，勉強算是合格吧
那到底應該怎么答呢捐友？
面試官背后的出題邏輯
別急淫半，咱們先整理一下思路，孫子兵法有云：“知己知彼匣砖，百戰(zhàn)不殆”科吭；面試就像打仗，你來我往猴鲫，所以我們需要換位思考对人，想一想，為什么面試官會問這樣一個問題拂共？面試官想從這個問題里得到什么回答牺弄？這個問題可以考察哪些技術點？ 想清楚這個問題宜狐，再回到自己身上势告，這些技術點蛇捌，你都掌握了嗎？
說得直白一點培慌，面試就像考試豁陆，你需要先 讀題、審題才能答好這道題吵护；
為什么很多人認為 “面試造火箭，工作擰螺絲”表鳍？因為沒有換位思考馅而，沒有想清楚面試題背后的邏輯；
那我們想清楚這個邏輯之后譬圣，需要我們做的就是提取技術點瓮恭，整理思路，做出對應解答厘熟；當然屯蹦，前提是你需要具備這些技術能力
那么接下來，我就嘗試拆解一下這個面試題了绳姨，提取其中的知識點登澜。
對于你來說，就是要看看這些知識點飘庄，你都掌握了多少脑蠕？
為什么 Vue3.0 要重寫響應式系統(tǒng) ?
為什么重寫？如果之前好好的跪削，重寫就沒有意義谴仙，那之前存在什么問題，現(xiàn)在是怎么解決的碾盐？就是關鍵點了晃跺；
不知道你對 Vue2.x 的響應式掌握多少，是不是欠下了技術的債呢毫玖？沒關系掀虎，我來幫你還債，先梳理 Vue2.x 的響應式孕豹；
其實基于這個面試題涩盾，背后還有很多技術點，上面這些励背，是與當前題目有直接關系的春霍，實際面試中，很有可能基于這些技術點叶眉，在進行深入交流址儒，這里就不擴展了芹枷，你能把現(xiàn)在這些問題理清楚，就算賺到了莲趣；
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 被訪問和修改時通知變更浊竟。這里需要注意的是不同瀏覽器在控制臺打印數(shù)據(jù)對象時對 getter/setter 的格式化并不同怨喘，所以建議安裝 vue-devtools 來獲取對檢查數(shù)據(jù)更加友好的用戶界面。
每個組件實例都對應一個 watcher 實例振定，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù) property 記錄為依賴必怜。之后當依賴項的 setter 觸發(fā)時，會通知 watcher吩案，從而使它關聯(lián)的組件重新渲染棚赔。
我們使用官方給的一張圖示，來梳理整個流程徘郭；
我們先來看一段代碼:
響應式原理
data 中的 obj 就是一個普通的 JavaScript 對象靠益，通過點擊 Click 按鈕，將獲取到的隨機數(shù)賦值給 this.message 残揉，而 this.message 指向的就是 data 中 obj 對象的 message 屬性胧后；當message 發(fā)生數(shù)據(jù)改變時，頁面中 H1 標簽的內容會隨之改變抱环，這個過程就是就是響應式的壳快；那么Vue 是如何實現(xiàn)的呢？
首先镇草，Vue 內部使用 Object.defineProperty() 將 Data 中的每一個成員都轉換為 getter / setter 的形式眶痰；getter 用來依賴收集，setter 用來派發(fā)更新梯啤；而模板內容竖伯，最終會被編譯為 render 函數(shù)，在 render 函數(shù)中，我們能發(fā)現(xiàn) _v(_s(message)) message 被訪問了七婴，就會觸發(fā) getter 來進行依賴收集祟偷，而在代碼中的點擊事件中，一旦事件處理程序被觸發(fā)執(zhí)行打厘，那么 message 則會被修改修肠，就會觸發(fā) setter來進行派發(fā)更新；
雖然流程理清楚了户盯，但是總感覺少點什么嵌施，怎么才能更通透呢？
我們用代碼來模擬整個的實現(xiàn)過程莽鸭；
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 = {}
// 數(shù)據(jù)劫持：當訪問或者設置 vm 中的成員的時候，做一些干預操作
Object.defineProperty(vm, 'msg', {
// 可枚舉（可遍歷）
enumerable: true,
// 可配置（可以使用 delete 刪除蒋川，可以通過 defineProperty 重新定義）
configurable: true,
// 當獲取值的時候執(zhí)行
get () {
console.log('get: ', data.msg)
return data.msg
},
// 當設置值的時候執(zhí)行
set (newValue) {
console.log('set: ', newValue)
if (newValue === data.msg) {
return
}
data.msg = newValue
// 數(shù)據(jù)更改，更新 DOM 的值
document.querySelector('#app').textContent = data.msg
}
})
// 測試
vm.msg = 'Hello World'
console.log(vm.msg)
</script>
你沒有看錯撩笆，加上注釋捺球，一共 36行代碼，這就是 Vue2.x 對響應式實現(xiàn)的整個流程夕冲；
繼續(xù)實現(xiàn)多個數(shù)據(jù)的響應式
<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
// 數(shù)據(jù)更改，更新 DOM 的值
document.querySelector('#app').textContent = data[key]
}
})
})
}
// 測試
vm.msg = 'Hello World'
console.log(vm.msg)
</script>
</body>
上面的代碼只是模擬了 響應式 的原理歹鱼，但Vue在實現(xiàn)中泣栈，肯定不會那么簡單，接下來弥姻，我們看一下源碼呀……
Vue2 源碼解讀
首先找到響應式代碼的處理位置：
看完Vue2.x 響應式的代碼南片，我們再回過頭來思考最開始的問題，為什么 Vue3.0 要重寫響應式系統(tǒng) ?
為什么重寫庭敦？如果之前好好的疼进，重寫就沒有意義，那之前存在什么問題秧廉，換句話問就是 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 實現(xiàn)了一個小功能区丑，代碼一模一樣，功能當然也一樣茫虽，但是刊苍，在 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 不能很好的實現(xiàn)對數(shù)組下標的監(jiān)控啥纸，而在 Vue2 的實現(xiàn)代碼中，沒有更好的方案對此進行改善婴氮，尤大索性直接放棄了實現(xiàn)斯棒；關于這個問題，尤大也在 github 做過回應主经，截個圖給大家看看荣暮；
那么，Vue 目前還沒有解決的問題罩驻，Vue3中顯然是已經解決的了穗酥，問題是，Vue3 是如何解決的呢惠遏？前面在 Vue3 的代碼中我們使用的是傳統(tǒng)的 Options Api 來實現(xiàn)的數(shù)據(jù)響應式砾跃， 而在 Vue3 中全新的 Composition Api 也實現(xiàn)了響應式系統(tǒng)，我們先來感受一下 Composition Api 的基礎用法
Composition API 的響應式系統(tǒng)
ref 響應式
<template>
<!-- 不需要.value -->
<button @click="addNu"> Composition API: {{nu}}</button>
</template>
<script>
// 引入 ref
import {ref} from "vue"
export default {
setup() {
// 定義 ref 響應式數(shù)據(jù)
const nu = ref(1);
// 定義函數(shù)
function addNu(){
nu.value++;
}
// 將數(shù)據(jù)和方法返回节吮，即可在模板中直接使用
return {
nu,
addNu
};
},
};
</script>
reactive 響應式
<template>
<!-- 不需要.value -->
<button @click="addNu"> Composition API: {{nu}}</button>
<!-- reactive 響應式數(shù)據(jù) -->
<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 響應式數(shù)據(jù)
const nu = ref(1);
// reactive 響應式數(shù)據(jù)
const revData = reactive({
name: '路飛',
age: 22,
skill:['橡膠機關槍','吃雞腿'],
})
function ageAdd(){
revData.age++
}
// 定義函數(shù)
function addNu(){
nu.value++;
}
// 將數(shù)據(jù)和方法返回抽高，即可在模板中直接使用
return {
nu,
addNu,
revData,
ageAdd
};
},
};
</script>
Vue3 中的響應式是如何實現(xiàn)的呢？關鍵點在于Proxy 函數(shù)透绩；
Proxy 實現(xiàn)原理
使用 Proxy 實現(xiàn)的響應式代碼翘骂，要比使用 defineProperty 的代碼簡單得多，因為 Proxy 天然的能夠對整個對象做監(jiān)聽帚豪，而不需要對數(shù)據(jù)行遍歷后做監(jiān)聽碳竟，同時也就解決了數(shù)組下標的問題；
我們來一段模擬代碼看一下：
<div id="app">
hello
</div>
<script>
// 模擬 Vue 中的 data 選項
let data = {
msg: 'hello',
count: 0
}
// 模擬 Vue 實例
const vm = new Proxy(data, {
// 執(zhí)行代理行為的函數(shù)
// 當訪問 vm 的成員會執(zhí)行
get (target, key) {
console.log('get, key: ', key, target[key])
return target[key]
},
// 當設置 vm 的成員會執(zhí)行
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>
