Considerations & Limitations (2)

同学们，我们来看一下，在Lightning Web Components的模板里，写表达式的时候，有些地方是有限制的。这些限制看起来有点多，但其实理解了背后的原因，就很容易记住，而且也有固定的办法去应对。 首先，在模板的表达式里面，有一串保留字和语法是完全不能用的，比如 `new`、`select`、`throw`、`yield`、`super`，还有什么类表达式、正则表达式的字面量、BigInt 的字面量，甚至包括表达式里面写注释，还有那个很少用的逗号运算符，这些统统不受支持。你可能会想，为什么不能用呢？主要是因为LWC的模板表达式不是完整的JavaScript，它会被编译成一种安全的、高效的代码，为了防止复杂的逻辑和副作用，所以干脆就不让你在里面用这些可能引起混乱或者性能问题的语法。那遇到真的需要用这些功能的时候怎么办？很简单，就在你的JavaScript类里面，把这些逻辑封装成一个属性或者方法，然后在模板里面只引用这个现成的结果。比如你要创建一个新的对象，就别在模板里写 `new MyClass()`，而是在JS文件里定义一个getter，返回那个对象，模板里直接写成 `{myComputedObject}` 就可以了。 然后呢，有一个很容易踩坑的点，就是属性绑定里面，复杂表达式必须要用引号。什么意思？比如你要动态拼一个class，写成 `class={computedClass}`，没问题，因为 `computedClass` 是一个简单的属性绑定。但如果你想写成 `class={ 'active' + someCondition }` 这样的复杂表达式，LWC就要求你必须把整个表达式的外层用引号包起来，写成 `class="{'active' + someCondition}"`。注意，这里的引号是放在花括号外面的。反过来，如果只是简单的属性绑定，比如 `value={simpleProp}`，这个引号就不需要，写不写都行，但一般我们习惯不加，因为它更简洁。你可以这样记：只要花括号里面不是干干净净的一个属性名或变量名，而是一个需要计算的表达式，那外面就老老实实套上双引号。 最后，我再说一遍应对所有限制的万能方法：一旦你发现模板里面直接写某个操作不支持，别纠结，直接回到JavaScript类里面去准备好数据或者逻辑，然后模板就只是负责展示。比如你要用正则表达式匹配，那就把正则结果存在一个属性里；你想抛出错误，抛错误的动作当然应该写在方法里，而不是模板里。记住，模板保持干净，逻辑放在JS里，这样你的组件既好维护，性能也好。 好了，这个小节就是这些限制和注意事项，大家先有个印象，实际写代码的时候遇到报错，再回头对照一下，慢慢就熟悉了。