Vue.js 3 访问这个未定义答案

【问题标题】：Vue.js 3 access to this undefinedVue.js 3 访问这个未定义
【发布时间】：2022-08-10 22:03:41
【问题描述】：

我是 Vue.js 3 的新手，但我在访问组件中的“this”对象时有一种奇怪的行为。

如果我的组件是用script setup 声明的，那么对“this”对象的访问总是未定义的，请参见下面的代码：

<script setup>
  import { onMounted } from \'vue\'

  onMounted(() => {
    console.info(\"Access KO: \" + this)
  })
</script>

如果我使用export default，一切正常，请参见以下代码：

<script>
export default {
  mounted() {
    console.info(\"Access OK: \" + JSON.stringify(this) + \"<<\")
  }
}
</script>

你有什么主意吗？

谢谢并恭祝安康。朱塞佩

标签： vue.js

【解决方案1】：

Arrow functions 有一个词法 this ，它在箭头函数中的值由周围的范围决定。在你的情况下，没有周围的范围。

这就是我们使用原始函数的原因。

试试下面的代码，看看this 是否正常工作

<script setup>
  import { onMounted } from 'vue';
 
  onMounted() {
    console.info("Access KO: " + this)
  })
</script>

笔记: 与export default 无关。如果您仔细观察，您会在第二个代码块中使用原始函数，这就是其工作的原因。

【讨论】：

【解决方案2】：

onMounted 使用回调，这种情况下正确的用法应该是这样的

onMounted(    () =>  console.info("Access KO: " + this))

【讨论】：