###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day8 關於 Vue 計算屬性Computed

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

在之前介紹`Mustache`語法的時候提到，可以在`Mustache`中使用表達式
例如顯示一個反轉的字串

<div id="app">
  <p>原始訊息：${ message }</p>
  <p>反轉訊息：${ message.split('').reverse().join('') }</p>
</div>

雖然可以，但如果專案中有大量這樣的東西，會讓程式碼很醜很難維護
這時候就可以用到今天要介紹的`Computed`計算屬性

### Computed介紹與使用
* 主要用來處理複雜邏輯運算。如：資料計算

改寫上方例子為

<div id="app">
    <p>原始訊息：{{ message }}</p>
    <p>反轉訊息：{{ reversedMessage }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!',
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('');
        },
    },
});

### Computed屬性：getter(讀取)、setter(寫入)
如果需要對`Computed`運算出來的結果，再進行更動的話，需要設置`getter` & `setter`，下面先範例只有`getter`(預設)的情況

<div id="app">
    <div>firstName: <input v-model="firstName" type="text"></div>
    <div>lastName: <input v-model="lastName" type="text"></div>
    <div>fullName: <input type="text" v-model="fullName"></div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Niodo',
        lastName: 'Shaba'
    },
    computed:{
        fullName(){
            return this.firstName +' '+ this.lastName;
        }
    },
});

測試後會發現更改`firstName`跟`lastName`時，`fullName`會跟著變動
但更改`fullName`時，`firstName`及`lastName`並不會一起更動

原因是因為`computed`僅有一個預設的`getter`，在沒有設定`setter`的時候無法對計算出來的屬性直接綁定，所以要加入`setter`屬性

<div id="app">
    <div>firstName: <input v-model="firstName" type="text"></div>
    <div>lastName: <input v-model="lastName" type="text"></div>
    <div>fullName: <input type="text" v-model="fullName"></div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Niodo',
        lastName: 'Shaba'
    },
    computed:{
        fullName:{
            //getter
            get(){
              return this.firstName +' '+ this.lastName;
            },
            //setter
            set(val){
              var name = val.split(' ');
              this.firstName=name[0];
              this.lastName=name[1];          
            }
        }
    }
});

---

*參考資料: https://reurl.cc/1ZaLD8*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*