※ 引述《clerkhsiao (火球小子)》之銘言：
: 因為工作上的需求, 最近開始自學 vue.js, 但遇上個問題一直解決不了, 所以想請問各位先進。
: 程式說明：
: 以下的的小程式有搭配bootstrap, 按下新增鈕之後會新增資料, 每一筆新增的資料會連帶產生一個年代的的model, 在生日的年的input上click之後, 會跳出生日的年代的model, 在特定的年代上click之後, 圓圈會切換成被打勾的圖案 ( 透過切換fa_circle和fa_check_circle這兩個class的方式來產生效果 )。
: 問題說明：
: 按下圓圈之後沒有切換成打勾的圖案, 我有用console.log把birthday_year這個陣列的值印出來, 按下的年代的值是有改變的( true 和 false的切換 ), 請問為什麼值有切換但效果卻沒出來呢?
: https://i.imgur.com/tg2yXhs.jpg
: https://i.imgur.com/w5ofdsf.jpg
: 程式：
: https://jsfiddle.net/clerkhsiao/w6puaxtn/16/
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
這是Vue官網上的說明，雖然是英文版但可以切換成簡中。簡單來說，如果你是直接修改
一個物件內的值，vue是不會知道你有修改的（在javascript內，陣列也算是一種物件）
。這是因為Vue在比較前後屬性的差異時會使用到Javascript的call by sharing特性（
請自行google，本文不會多說明）。
以下是vue的二種解決方法，我也會介紹另一種問題比較少的解決方法
1.this.$set() Vue.set()
上面的二個方法都是指同一個，根據不同的呼叫點使用。這個方法簡單來說是告訴vue使用
者要修改某一物件/陣列中的某一個值，這樣Vue就會自動幫你處理物件/陣列和更新的問題
，但有一個小問題，當你要處理的物件/陣列本身是多維時，使用set方法有時不會出現你
想要的結果。
2.this.$forceUpdate() Vue.forceUpdate()
這個方法簡單來說就是告訴vue，請幫我檢查"組件中所有屬性"，同時處理更新，因為這個
方法是檢查所有屬性，所以會很吃效能，通常在一個組件中使用的一次就是極限了。但因
為這個方法很方便，通常都會濫用到拖慢效能。官網也不太建議使用這個方法（那你還開
這個API?）
https://vuejs.org/v2/guide/components-edge-cases.html#Controlling-Updates
3.React中的解決方法
因為React中很強調不變性，在修改物件/陣列時不會直接修改內部的值，而是先產生一個
新的物件/陣列，再把這個新物件/陣列指定回本來的物件/陣列。
以下是react風格的使用方法
let newList = [...this.birthday_year].map((year,fs_circle,..otherts ) => {
if (year === 1953) {
return ({year,fs_circle: !fs_circle,...others})
}
else {
return ({year,fs_circle,...others})
}
})
this.birthday_year = newList
一般來說我會比較建議使用React風格的解決方法，因為只要寫的出來就好，之後要增加
功能也方法，但你也可以使用Vue的方法就是了，對react和vue都會的小弟我說，vue的方
法真是太多餘了.