1、Vue專案中為什麼要在列表元件中寫key，作用是什麼？

我們在業務元件中，會經常使用迴圈列表，當時用v-for命令時，會在後面寫上:key，那麼為什麼建議寫呢？

key的作用是更新元件時判斷兩個節點是否相同。相同則複用，不相同就刪除舊的建立新的。正是因為帶唯一key時每次更新都不能找到可複用的節點，不但要銷燬和建立節點，在DOM中還要新增移除節點，對效能的影響更大。所以才說，當不帶key時，效能可能會更好。
因為不帶key時，節點會複用（複用是因為Vue使用了Diff演算法），省去了銷燬或建立節點的開銷，同時只需要修改DOM文字內容而不是移除或新增節點。既然如此，為什麼我們還要建議帶key呢？因為這種不帶key的模式只適合渲染簡單的無狀態的元件。對於大多數場景來說，列表都得必須有自己的狀態。避免元件複用引起的錯誤。
帶上key雖然會增加開銷，但是對於使用者來說基本感受不到差距，為了保證元件狀態正確，避免元件複用，這就是為什麼建議使用key。
2、Vue的雙向繫結，Model如何改變View，View又是如何改變Model的？

我們先看一幅圖，下面一幅圖就是Vue雙向繫結的原理圖。

第一步，使資料物件變得“可觀測”

我們要知道資料在什麼時候被讀或寫了。

let person = {
‘name’: ‘maomin’,
‘age’: 23
}
let val = ‘maomin’;
Object.defineProperty(person, ‘name’, {
get() {
console.log(‘name屬性被讀取了’)
return val
},
set(newVal) {
console.log(‘name屬性被修改了’)
val = newVal
}
})
// person.name
// name屬性被讀取了
// “maomin”
// person.name=‘xqm’
// name屬性被修改了
// “xqm”

更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/119250932