LWC有一个由框架管理的生命周期。该框架用于创建组件，将它们插入DOM，渲染它们，并将它们从DOM中移除。它还监控组件的属性变化。

我们可以基于组件的创建渲染以及组件的移除两部分进行描述。

一.创建渲染场景

我们先介绍这几个创建渲染场景的生命周期方法。

1. constructor：此方法用于当组件实例创建时，方法自动执行。此构造函数在项目中用到的场景很少，因为此方法执行时，组件内变量，元素属性等还没有实例化。如果使用此构造函数，需要考虑：
   • 第一行必须是super();
   • 此构造函数中不要使用return语句；
   • 不要使用document.write()或者document.open()方法；
   • 不要检查该元素的属性和子元素，因为它们还不存在；
   • 不要检查元素的公共属性，因为它们是在组件被创建后设置的。
2. connectedCallback：当组件被插入到DOM里，会自动执行此生命周期方法。connectedCallback在实际项目中经常用到，通常在 connectedCallback方法中实现以下的功能：
   • 执行初始化的任务，如获取数据、设置缓存或监听事件(上一篇内容)。
   • Message Channel的 subscribe(订阅)和 unsubscribe(取消订阅)，这个部分会在后续的lwc内容有介绍。

不能从此方法中访问子元素的内容，因为它们还不存在。要访问当前元素的属性等，使用this。要访问一个组件模板中的元素，使用this.template。

connectedCallback我们会在后续的demo中经常看到，如果现在对这个的功能有疑问，记住可以实现的功能，后续看到了可能会更好的了解。

1. renderedCallback：当组件完成了渲染阶段以后，会自动执行的方法。当组件渲染时，所有在html的template中的表达式将会重新计算以及重新UI渲染。相对来说，在renderedCallback做的事情比较灵活，比如某个变量为什么值，执行什么操作等。

接下来，我们看一下父子组件加载到DOM中，生命周期的方法的执行顺序，这个对于我们实际开发中很重要。

1. 父组件执行constructor方法；
2. @api的公共变量是否有被外部更新，比如 lightning app builder有设置，则更新这个变量 ；
3. 父组件插入到DOM中；
4. 父组件执行 connectedCallback方法；
5. 父组件渲染；
6. 子组件执行子组件的 constructor方法；
7. 子组件 @api的公共变量是否有被父组件更新，如果有，则更新这个变量；
8. 子组件插入到DOM中；
9. 子组件执行子组件的 connectedCallback方法；
10. 子组件渲染；