溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Vue中如何使用this.$options.data()和this.$data，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
問題
項目里遇到一個問題，用this.$options.data()重置組件data時，data()里用this獲取的props或method都為undefined，代碼簡化如下：
export default {
props: {
P: Object
},
data () {
return {
A: {
a: this.methodA
},
B: this.P
};
},
methods: {
resetData () { // 更新時調用
Object.assign(this.$data, this.$options.data()); // 有問題！！！
},
methodA () {
// do sth.
},
methodB () { // 通過用戶操作調用
this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined！！！
}
}
}調用resetData()之后，再調用methodB()時，this.A.a和this.B是undefined。
解決
resetData里這樣寫：
resetData () { // 更新時調用
Object.assign(this.$data, this.$options.data.call(this));
}原因
和Vue實例的初始化相關。(源碼version2.6.10)
1、new Vue的時候傳了一個對象，把該對象記為options，Vue將options中自定義的屬性和Vue構造函數中定義的屬性合并為vm.$options，vm.$options.data()中的this指向vm.$options，而methodA和B并沒有直接掛在vm.$options下，所以this.methodA和this.B為undefined。
// 創建一個vue實例
const options = {
customOption: 'foo',
data () {
A: this.methodA
},
methods: {
methodA () {}
},
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
};
new Vue(options);
// src/core/instance/init.js
initMixin (Vue: Class<Component>) {
const vm: Component = this
// ...
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
// ...
}2、然后將vm.$options.data映射到vm._data，使得可以通過vm._data訪問數據，在映射過程中，通過call將data()的this指向當前的實例vm，并將data()的執行結果返回，因為prop和methods的初始化在data之前，所以這時vm上已有_props和_methods，可以拿到this.methodA和this.B。（vm.key如何實現vm._props.key效果見3）。
// src/core/instance/state.js
initState (vm: Component) {
// ...
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm) // 里面通過getData(data, vm)改變this
}
// ...
}
getData (data: Function, vm: Component): any {
// ...
try {
return data.call(vm, vm) // this替換為vm
}
// ...
}3、上面把屬性映射到了vm._data里，可以通過vm._data.A訪問數據，Vue再通過一個代理方法使得vm.A可以直接訪問A。
// src/core/instance/state.js
proxy(vm, `_data`, key);
proxy (target: Object, sourceKey: string, key: string) {
sharedPropertyDefinition.proxyget = function proxyGetter () {
return this[sourceKey][key]
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}總結
data()中若使用了this來訪問props或methods，在重置$data時，注意this.$options.data()的this指向，最好使用this.$options.data.call(this)。
看完上述內容，是不是對Vue中如何使用this.$options.data()和this.$data有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
