Re: [問題] vue.js 的class的切換

[BugofBook (愛書蟲)]

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

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.41.124 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1598756322.A.1AA.html
推 davidsky: 什麼call by sharing..vue就是埋setter而已
→ davidsky: 陣列不知道變了是因為他無法對陣列每個元素埋setter
推 oToToT: 推樓上
噓 jhnny97: 對不起，這篇太黑白講了忍不住要噓一下XD
→ dododavid006: 你第三個寫法 map 本身就會回傳新的陣列了，不用複
→ dododavid006: 製一份啊，而且參數是不是少用大括號啊
推 clerkhsiao: 謝謝補充說明