为什么在 Vue 模板中有时 'this' 有效，有时却无效？

Question

有一种情况，其中有两个不同的组件，它们的模板中使用了“this”。现在从模板中删除所有“this”，但看到这种情况并很好奇为什么会这样。

在这种情况下，它会抛出错误：

<a :href="`${this.$locale() ? "Yes" : "No}`">

在这种情况下它可以工作：

<title :lang="this.$locale()">

这些只是示例，但是否有一个原因可以工作而其他人会抛出错误？在 Vue 文档中找不到任何相关信息。会不会是三元运算的原因？

Answer 1

首先，要让阅读本文的人清楚，您不应该在 Vue SFC 模板中使用 this。

对于 anwser，这是因为 Vue 如何编译您的模板及其属性。我不是 Vue 内部机制方面的专家，所以请谨慎行事。

:lang="this.$locale() 这里，可能是 Vue 在构建时删除了 this 引用。

:href="`${this.$locale() ? "Yes" : "No}`" 这里使用的是字符串插值，它在运行时进行评估。 Vue 无法安全地删除this，因为它可能引用了组件实例之外的其他东西。所以this 在最终包中保持原样并在运行时中断。

这只是我对 Vue 的理解的猜测。我认为只有 Vue 维护者/贡献者才能正确回答这个问题。