VueJS:なぜ「これ」が未定義なのですか?
Vue.js でコンポーネントを作成しています。
ライフサイクルフック (this
、created
、mounted
など)のいずれかでupdated
を参照すると、undefined
に評価されます。
mounted: () => {
console.log(this); // logs "undefined"
},
同じことが、計算されたプロパティ内でも発生しています。
computed: {
foo: () => {
return this.bar + 1;
}
}
次のエラーが表示されます。
不明なTypeError:未定義のプロパティ 'bar'を読み取れません
これらの場合にthis
がundefined
に評価されるのはなぜですか?
これらの例は両方とも arrow function() => { }
を使用し、Vueインスタンスとは異なるコンテキストにthis
をバインドします。
ドキュメント に従って:
インスタンスプロパティまたはコールバックで矢印関数を使用しないでください(例:
vm.$watch('a', newVal => this.myMethod())
)。矢印関数は親コンテキストにバインドされているため、this
はVueインスタンスではなく、this.myMethod
は未定義です。
Vueインスタンスとしてthis
への正しい参照を取得するには、通常の関数を使用します。
mounted: function () {
console.log(this);
}
または、関数に ECMAScript 5の省略形 を使用することもできます。
mounted() {
console.log(this);
}
矢印関数 を使用しています。
Vue Documentation は、プロパティまたはコールバックで矢印関数を使用しないことを明記しています。
通常の関数とは異なり、矢印関数はthis
をバインドしません。代わりに、this
は字句的にバインドされます(つまり、this
は元のコンテキストから意味を保持します)。
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: ()=>{
console.log(this)
}
});
これにより、次のオブジェクトがコンソールに記録されます。
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
一方、...通常の関数を使用する場合(Vueインスタンスで実行する必要があります)
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: function(){
console.log(this)
}
});
コンソールに次のオブジェクトを記録します。
hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}