你的前端框架要被 Web 组件取代了(3)

connectedCallback 对应的是 disconnectedCallback，当从 DOM 中删除元素时调用后者。该方法可以用来执行任何必要的清理工作，但请记住，当用户关闭浏览器或浏览器选项卡时不会调用此方法。
当通过调用 document.adoptNode(element) 来将元素引入文档时还会调用 adoptCallback。到目前为止，我从未遇到过这个回调的用例。
还有一个很有用的生命周期方法是 attributeChangedCallback。每当属性更改已添加到 observedAttributes 数组时都会调用此方法。可以使用属性的名称、旧值和新值来调用它：
class MyElement extends HTMLElement { static get observedAttributes() { return ['foo', 'bar']; } attributeChangedCallback(attr, oldVal, newVal) { switch(attr) { case 'foo': // do something with 'foo' attribute case 'bar': // do something with 'bar' attribute } }}
此回调仅对 observeAttributes 数组中存在的属性调用，在本例中为 foo 和 bar。这个回调不会对其它变动过的属性调用。
属性主要用于声明元素的初始配置 / 状态。理论上讲，可以通过序列化将复杂值传递给属性，但这可能会降低性能表现；因为你可以访问组件的方法，所以不需要这样做。如果你想通过 React 和 Angular 等框架提供的属性进行数据绑定，你可以查看Polymer。
生命周期方法的执行顺序生命周期方法的执行顺序是：
constructor -> attributeChangedCallback -> connectedCallback
为什么在 connectedCallback之前执行 attributeChangedCallback？
回想一下，Web Components 上属性的主要用途是初始配置。这意味着当组件插入 DOM 时，此配置需要处于可用状态，因此需要在 connectedCallback 之前调用 attributeChangedCallback。
这意味着如果你需要根据某些属性的值配置 Shadow DOM 中的任何节点时，需要引用位于构造函数 constructor 中的节点，而不是在 connectedCallback 中引用它们。