為什麼在Vue 3函數中"this"被定義為未定義的

Question

請看下面的Vue 3中的簡單元件範例：

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

我試著去理解為什麼在從one()函數呼叫two()函數時，this在two()函數中是undefined。兩個函數都在setup()中返回，所以我期望它們都能存取this。

話雖如此，那麼如何在two()函數中取得元件實例this的參考呢？

Answer 1

我想Vue仍然需要遵守JavaScript的規則。當事件處理程序被呼叫時，通常是在接收事件的物件的上下文中。在這種情況下，one()被綁定到<a>元素的Proxy，並且this綁定到Proxy。

然而，two()被特別地呼叫沒有上下文（即：two()而不是someobject.foo()）。這意味著this將是未定義的。

我對Vue不是非常熟悉，但我想它不會自動綁定方法，這樣就不需要你為你不使用的東西付費。

由於one()中this已正確綁定，你實際上可以將two()作為this的方法調用，而不是作為裸函數調用：

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