※ 引述《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的方
法真是太多余了.