Mengapa "ini" ditakrifkan sebagai tidak ditentukan dalam fungsi Vue 3

Question

Lihat contoh komponen mudah dalam Vue 3 di bawah:

<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>

Saya cuba memahami kenapa dari one()函数调用two()函数时，this在two()函数中是undefined。两个函数都在setup()中返回，所以我期望它们都能访问this.

Setelah berkata demikian, bagaimana pula dengan petikan dalam two()函数中获取对组件实例this?

Answer 1

Saya rasa Vue masih perlu mengikut peraturan JavaScript. Apabila pengendali acara dipanggil, ia biasanya dalam konteks objek yang menerima acara. Dalam kes ini, one()被绑定到<a>元素的Proxy，并且this绑定到Proxy.

Walau bagaimanapun, two()被特别地调用没有上下文（即：two()而不是someobject.foo()）。这意味着this akan tidak ditentukan.

Saya tidak begitu mahir dengan Vue, tetapi saya bayangkan ia tidak mengikat kaedah secara automatik supaya anda tidak perlu membayar untuk sesuatu yang anda tidak gunakan.

Disebabkan panggilan kaedah one()中this已正确绑定，你实际上可以将two()作为this dan bukannya dipanggil sebagai fungsi kosong:

<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>