Regardez l'exemple de composant simple dans Vue 3 ci-dessous :
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Test',
setup(){
return{
one,
two
}
}
})
function one(){
console.log(this) //<-- Proxy{}
two()
}
function two(){
console.log(this) //<-- undefined
}
</script>
<template>
<a href="#" @click.prevent="one()">开始</a>
</template>
J'essaie de comprendre pourquoi à partir de one()函数调用two()函数时，this在two()函数中是undefined。两个函数都在setup()中返回，所以我期望它们都能访问this.
Cela dit, que diriez-vous d'une citation en two()函数中获取对组件实例this ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je suppose que Vue doit toujours suivre les règles de JavaScript. Lorsqu'un gestionnaire d'événements est appelé, c'est généralement dans le contexte de l'objet recevant l'événement. Dans ce cas,
one()被绑定到<a>元素的Proxy，并且this绑定到Proxy.Cependant,
two()被特别地调用没有上下文（即：two()而不是someobject.foo()）。这意味着thissera indéfini.Je ne connais pas très bien Vue, mais j'imagine qu'il ne lie pas automatiquement les méthodes, vous n'avez donc pas à payer pour quelque chose que vous n'utilisez pas.
En raison de l'appel de méthode de
one()中this已正确绑定，你实际上可以将two()作为thisau lieu d'être appelé comme une simple fonction :<script> import { defineComponent } from 'vue' export default defineComponent({ name: 'Test', setup(){ return{ one, two } } }) function one(){ console.log(this) //<-- Proxy{} this.two() } function two(){ console.log(this) //<-- Proxy{} } </script> <template> <a href="#" @click.prevent="one()">开始</a> </template>