Vue.js data 還原初始值的小技巧

前言

通常來講,我們在開發時往往會很需要還原初始值,因此這一篇就來分享一下小技巧,而這個小技巧基本上不論是 Vue2 還是 Vue3 都是通用的。

情境

我們其實很常與遠端伺服器做 AJAX 溝通,那麼當使用者溝通完畢後總是會有一種狀況存在,就是使用者輸入的原始資料依然保留在 Vue Data 中,這時候可能會有一些很麻煩的問題發生,所以我這邊寫了一段程式碼模擬了使用者輸入之後點連結觸發 AJAX 的行為(並不是真的觸發,只是用 setTimeout 語法模擬而已)。

1
2
3
4
5
6
7
<div id="app">
請輸入你的姓名:
<input type="text" v-model="myName">
<div>我的名字是:{{ myName }}</div>
<br>
<a href="#" @click.prevent="ajax">點我觸發 AJAX</a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.createApp({
data() {
return {
myName: ''
}
},
methods: {
ajax() {
setTimeout(() => {
console.log('新增成功!');
console.log('但是原始資料依然存在:', this.myName);
}, 1500);
}
}
}).mount('#app');

你可以試著點以下 Codepen 試試看

解決方式

那麼為了達到這個需求來講,通常我們可能這樣做,在 AJAX 之後重新賦予空值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.createApp({
data() {
return {
myName: ''
}
},
methods: {
ajax() {
setTimeout(() => {
console.log('新增成功!');
this.myName = '';
}, 1500);
}
}
}).mount('#app');

但這種做法其實是會有一些問題存在,當如果你是一個物件時,你就必須重新寫一樣的物件屬性,其實格外麻煩且可能維護上會有一些問題。

那該如何解決才會比較好呢?其實非常簡單,你只需要這樣寫就好了

1
this.$options.data()

在 Vue 官方文件中其實有提到這個 物件 屬性,以下擷取官方文件說明:

用于当前组件实例的初始化选项。

看起來文謅謅吧?簡單來講就是,當你 Vue 準備完畢時,它會將你初始化的 data 資料拷貝到 this.$options 底下,data 本身是一個函式,所以你必須使用呼叫的方式,因此你就可以將上方改寫成以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.createApp({
data() {
return {
myName: ''
}
},
methods: {
ajax() {
console.log(this);
setTimeout(() => {
console.log('新增成功!');
this.myName = this.$options.data().myName
console.log('資料變成初始了:', this.myName);
}, 1500);
}
}
}).mount('#app');

這樣子在做還原初始值是一個比較安全且保險的方式,畢竟你在第一次渲染時都會盡可能的定義初始值,那麼要還原初始值的話,反而會建議使用 this.$options.data() 會較穩定(避免你粗手指漏寫)

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ