技術標籤：vue面試

怎樣理解 Vue 的單向資料流？

資料從父級元件傳遞給子元件，只能單向繫結。
子元件內部不能直接修改從父級傳遞過來的資料。

所有的prop都使得其父子prop之間形成一個單向下行繫結：父級prop的更新會流動到子元件中，但是反過來不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

額外的，每次父級元件發生更新時，子元件中所有的prop都將會重新整理為最新的值。

這意味著你不應該在一個子元件內部改變prop。如果你這樣做了，Vue會在瀏覽器的控制檯發出警告。

子元件想修改時，只能通過 $emit 派發一個自定義事件，父元件接收到後，有父元件修改。

有兩種常⻅的試圖改變⼀個 prop 的情形 :

• 這個 prop ⽤來傳遞⼀個初始值；這個⼦元件接下來希望將其作為⼀個本地的 prop 資料來使⽤。 在這種情況下，最好定義⼀個本地的data 屬性並將這個 prop ⽤作其初始值：

props: ['initialCounter'],
data: function () {
 return {
 counter: this.initialCounter
 }
}

• 這個 prop 以⼀種原始的值傳⼊且需要進⾏轉換。 在這種情況下，最好使 ⽤這個 prop 的值來定義⼀個計算屬性

props: ['size'],
computed: {
 	normalizedSize: function
 
 () {
 	return this.size.trim().toLowerCase()
 	}
}