基于Vue中this.$options.data()的this指向問題

更新時間：2022年03月03日 10:22:54 作者：ds_surk

這篇文章主要介紹了基于Vue中this.$options.data()的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

this.$options.data()的this指向問題

項目里遇到一個問題，用this.$options.data()重置組件data時報錯，原因是因為form里的rule規(guī)則采用了this寫法。

如下：

rules: {
? ? ? ? code: [this.$rules.required()],
? ? ? ? name: [this.$rules.required()],
? ? ? ? age: [
? ? ? ? ? {min: 1, max: 120, type: 'number', message: '年齡 1 到 120 之間', trigger: 'blur'}
? ? ? ? ],
? ? ? ? email: [
? ? ? ? ? {type: 'email', message: '郵箱格式不正確', trigger: 'blur'}
? ? ? ? ]
? ? ? },

this.$rules是一個自定義全局變量，想到可能是由于this指向的問題導致找不到$rules.required對象了。

首先，我們知道，vue中 this.$options.data() 可以獲取原始的data值（只讀），this.$data 獲取當前狀態(tài)下的data,在重置data數(shù)據(jù)時，拷貝重新賦值一下就行了。

如下：

Object.assign(this.$data, this.$options.data());

這是，如果，你的data數(shù)據(jù)中有采用this的寫法，在調(diào)用this.$options.data() 就會報錯，因為data()內(nèi)部的this指向不對。

vue文檔中有關(guān)于data的指向問題的解釋

如下：

如果你為 data property 使用了箭頭函數(shù)，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數(shù)的第一個參數(shù)來訪問。

data: vm => ({ a: vm.myProp })

這是一種方法，還有一種方法是調(diào)用時為data函數(shù)指定this。

如下：

Object.assign(this.$data, this.$options.data.call(this));

vue騷操作之this.$options.data()

重置vue組件的data數(shù)據(jù)

在vue單文件組件里有時需要重置data中的數(shù)據(jù)，比如表單填寫一半，用戶想重新填寫。

<script>
? ? export default {
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 表單
? ? ? ? ? ? ? ? form: {
? ? ? ? ? ? ? ? ? ? input: ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? // 重置表單方法
? ? ? ? ? ? retset() {
? ? ? ? ? ? ? ? this.form = this.$options.data().form;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ...
? ? }
</script>

也可以通過給組件 $data 對象賦值來重置來重置整個 $data