為什麼畫面沒有隨資料更新 - Vue 響應式原理（Reactivity），JSONPlaceholder--提供API串接的資料，讓前端好練習，Semantic UI--像bootstrap，其class名稱一看就知道什麼意思，SuperAgent--Ajax的一種，也是抓API資料

裡面的影片很好 https://pjchender.blogspot.com/2017/05/vue-vue-reactivity.html

• 為什麼畫面沒有隨資料更新 - Vue 響應式原理（Reactivity）
• JSONPlaceholder--提供API串接的資料，讓前端好練習
• Semantic UI--像bootstrap，其class名稱一看就知道什麼意思，也有自適應
• SuperAgent--Ajax的一種，也是抓API資料(如果習慣了ajax好像就不需要再特地學它)

下面來個例子，API李員沒有author資料，但前端畫面要有author欄位，希望user輸入時user可見的同畫面預覽表格裡可會同步更新輸入得值。其中，前端畫面的輸入框及預覽框都以寫入post.author。

之所以不會同步更新畫面，是因為沒有將該變數寫入data，解法有以下幾種：

1. 將該變數寫入data
2. Vue.set(object, key, value)，object是目標對象，key是欲命名的名稱，value是它的初值(大概是用在初值是要計算後取得的吧)
   →vm.$set(vm.post, 'author', ' ')
3. 用object.assign建立新物件(這個不熟，要小心用，否則再研究研究)
   →vm.post = Object.assign({}, response, {author:''})

同一個例子，說說Array

上圖之所以要設定let vm= this是因為之後的API回傳裡面直接寫this，會指向撈取API的程式，而不是Vue物件，即本例中，vm.posts不可以改成this.posts。

又API接收到的Array不需要個別去設定裡面的值，只要把接受到的名稱，以同樣的名稱寫入Vue的data項裡面。

修改了輸入框的資料，要儲存起來：

• 不可以：用指定array[index]去儲存內容。
  →this.posts[this.currentIndex] = this.post
• 可以：
  1.  用Array的方法，如push, shift, splice, ....去儲存。
  →this.posts.splice(this.currentIndex, 1, this.post)
  2.  vm.$set(array, index, value)
  →this.$set(this.posts, this.currentIndex, this.post)
• 問題：不論是方法一還是方法二，在儲存新的資料後，點擊array元素都會有種壞掉的變化，這是因為上方兩種方式直接把object存入原有的位子了，造成其他的元素參考相同位置時也跟著變化，簡單的說，是by reference造成的。
  
  解法：以建立新物件的方式儲存
  →this.$set(this.posts, this.currentIndex, Object.assign({},this.post))

※

vm.$forceUpdate() 強制更新 DOM

vue debuff 可思考要不要裝

var d = Object.assign({},a,b) 複製物件，d={}和a和b物件的所有和
接API，接到JSON要轉成JS object，用JSON.parse(res)