前言

先來聊聊接觸Vue2 的過程
在第一個專案後端java spring mvc寫了約8個月後

有了新的專案
當時才第一次聽到Vue
還有Cordova
還有其實是做個App

這都大大脫離了我原本的後端世界

剛開始就是完全體

所以我的學習歷程我想與一般前端學習Vue的路線不太一樣
原本可能是
CDN引入 玩一些簡單的功能
使用vue cli建立簡單的spa
加入vue router 做路由管理
加入vuex 做資料的全域管理

但我則是直接從一個已經是完全體的專案
直接進行增修功能、修bug來做中學

然後是帶著mvc的思維去看mvvm

碰到釘子

剛開始都沒問題
直到遇到一些js語法特性
一些Vue的特性，如Array 的變化監聽
直接碰到釘子 卡得痛不欲生

再加上vue optional api的特性 與 邏輯沒切乾淨
邏輯混在一團
當時可是個災難

舉個例子 - Array 的響應

以下為Vue 2版本

根據官方的說法

Mutation Methods
Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

當時想到一個簡單的暴力解-deep clone

let array = JSON.parse(JSON.stringify(array)

還有使用loadsh cloneDeep

當然還有其他方法
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript

舉個例子 - mixin命名 與 程式命名

Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as Base, App, or V.
https://v2.vuejs.org/v2/style-guide/?redirect=true

同一功能也可以用樣前綴
- BikeSearch.vue
- BikeList.vue
mixin 前面都帶mixin前綴
-MixinBikeTable.vue

參考資料

Array-Change-Detection

https://v2.vuejs.org/v2/style-guide/?redirect=true