Vue新手開發小技巧與觀念

發表於 分類於 Disqus：

前言

進入新公司已經大概三個月，新團隊的專案採前後端分離(前端：Vue.js / Vuetify；後端：.Net Core Web API)，算是第一次實戰開發前後端分離的專案，不同於以往幾乎都把重心放在後端，雖然之前有學過Vue但也是寫寫side project的程度，在實務開發上也是費了不少工夫去學習和理解其運作原理，這篇將提及幾個滿基礎的小技巧和重要觀念，縮少程式碼與處理邏輯。以下是我近三個月學習使用 Vue.js 開發中學習的一些技巧。

簡化語法

Vue 針對 綁定事件 與 屬性 的操作有提供縮寫的語法

v-on

1
2
3
4
<!-- 完整語法 -->   
<button v-on:click="clickMe">Button</button> 
<!-- 縮寫 -->   
<button @click="clickMe">Button</button>

v-bind

1
2
3
4
<!-- 完整語法 -->
<button v-bind:disabled="isDisabled">Button</button>
<!-- 縮寫 -->
<button :disabled="isDisabled">Button</button>

利用Computed

如果在模版內加入太多的邏輯運算，會顯得雜亂也難以維護。
例如：我們想要在金錢數字+上新台幣的格式 100 → NT$100；或是想要顯示反轉字串的結果時

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
    <p>NT${{money}}</p>
    <p>{{moneyFormat}}</p>
    <hr>
    <p>
        {{ name.split('').reverse().join('') }}
    </p>
    <p>{{reverseName}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: "Tim",
            money: 100
        },
        computed: {
            moneyFormat: function () {
                return "NT$" + this.money;
            },
            reverseName: function () {
                return this.name.split('').reverse().join('');
            }
        },
    })
</script>

將邏輯寫在Computed裡，這樣不僅可以讓模板乾淨，也可以在多個地方調用提升維護性和重用性。

利用Watch

當實體內資料變動時，可以多加使用watch去監聽觸發某個動作。
例如：當在input 每次輸入firstName或lastName時，會觸發各自在watch的function，可以即時更新fullName的資料。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
    <input type="text" v-model="firstName">
    <br>
    <input type="text" v-model="lastName">
    <br>
    舊名字：{{ oldFullName }}
    <br>
    新名字：{{ newFullName }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            oldFullName: '',
            newFullName: '',
        },
        watch: {
            // 參數可以自行命名（更新資料,原始資料）
            firstName: function (newValue, oldValue) {
                this.oldFullName = oldValue + this.lastName;
                this.newFullName = newValue + this.lastName;
            },
            lastName: function (newValue, oldValue) {
                this.oldFullName = this.firstName + oldValue;
                this.newFullName = this.firstName + newValue;
            }
        },
    })
</script>

在Created時才初始化資料

在網頁載入初期經常需要先初始化資料，在Vue的生命週期中，資料在created時期才做資料繫結，所以別把資料初始化的動作或ajax寫在beforeCreate。

參考資料

Vue 官方文件