为什么Vue模板中使用this有时正常运行有时会抛出错误？

两个写法的表现差异和三元运算符无关，本质是HTML属性引号嵌套冲突 + Vue模板编译的上下文绑定规则共同导致的。

1. Vue模板表达式的基础规则 #

Vue在编译模板时，所有v-bind（简写:）绑定的表达式、双花括号插值内容，都会自动被包裹在with(this) { /* 你的表达式 */ }块内执行，this默认指向当前组件实例。也就是说你在模板里写$locale()和写this.$locale()运行时效果完全等价，官方不推荐在模板里显式写this，属于冗余写法。

2. 两种写法的差异根源 #

• 报错的写法存在HTML属性引号嵌套冲突
  你给出的错误代码：

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

整个:href属性的值是用双引号"包裹的，而三元表达式里的Yes/No也用了双引号，HTML解析器会把Yes前面的第一个双引号，识别为整个href属性值的结束标记，后续的内容Yes : "No"}">会被判定为非法的HTML语法，直接抛出解析错误，和this`、三元运算符本身都没有直接关联。

如果你把内部的字符串改成单引号包裹，就能正常运行：

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

• 正常的写法没有引号嵌套冲突
  你给出的正常运行代码：

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

属性值内部没有嵌套的双引号，HTML解析、Vue编译都能正常处理，哪怕你写了冗余的this，也能正确绑定到组件实例的$locale方法，所以不会报错。

3. 额外注意事项 #

哪怕修改引号后带this的写法能运行，也建议把模板里所有显式的this删除，一方面符合Vue的设计惯例，另一方面也能避免在部分边缘场景（比如嵌套的表达式、作用域插槽内部）出现this指向异常的问题。

内容的提问来源于stack exchange，提问作者Arminas Šaltenis