constructor() — Rules & Restrictions

同学们，我们来看看Lightning Web Components生命周期里的第一个钩子——，构造器，，也就是constructor。它是组件被创建时最先执行的方法，速度很快，但能做的事情非常有限。 为什么呢？因为构造器在组件真正挂载到DOM之前就已经触发了。也就是说，这个时候模板还没渲染，子元素还没生成，任何属性或公有属性也都没准备好，它们都还不存在。所以，在构造器里，你不能访问`this.template`，不能碰任何子元素，也不能读取传入的属性值。 接下来，要特别注意HTML自定义元素的规范要求。编写构造器时，，必须，先调用`super()`，而且不能带参数。这行代码必须写在第一句，它会先建立起组件的基础。另外，构造器里，不要，使用`return`语句，如果非要用，也只能是简单的早期返回，比如加个条件直接return，但正常情况下不要返回值。还有，绝不能在里面调用`document.write()`或者`document.open()`，这会破坏页面结构。 很多新手容易犯的一个错误，就是试图在构造器里给宿主元素（也就是这个自定义组件的外层元素）添加属性或CSS类。比如说，想用`this.classList.add('highlight')`来加样式，，这是不行的，。因为这个时候宿主元素还没有出现在DOM里，操作不了。正确的做法是把这些DOM相关的交互都放到`connectedCallback()`这个钩子里去做，这时组件已经挂载好，可以安全操作。 那构造器还能干什么呢？它的最佳用途就是，用默认值进行简单的字段初始化，。比如，在组件内部定义一个`count = 0`，或者`message = 'Hello'`之类的初始状态。这些纯数据的初始化不会触碰DOM，完全适合在构造器里完成。 总结一下：构造器最早触发，最受限。遵守规则——先呼`super()`，不碰DOM，不操作属性，只初始化自己的简单字段。其他任何需要“看得到”组件元素的代码，都请移到`connectedCallback`里写。 这样讲，大家清楚了吗？