Example: Counter with Attribute Change Callback

同学们，今天我们来学一个更高级的计数器写法，叫作，属性观察模式，。别害怕，其实很简单。 还记得我们之前做的计数器吗？这次我们让它变得更灵活：不管是在组件内部改，还是从外部改计数，页面都能自动更新。 首先，我们把，计数，做成一个 `getter/setter` 对。 - 当你在代码里读 `this.count` 时，它实际上读取的是 HTML 属性上的值。 - 当你写 `this.count = 5` 时，它不仅更新了变量，还会把组件对应的 HTML 属性 `count` 也给更新一下。 这样，，属性， 和 HTML 上的 ，特性， 就永远保持同步了。 然后，我们通过 `observedAttributes` 这个静态属性，告诉浏览器：“嘿，帮我看好 `count` 这个属性，一旦它变了，叫我来处理。” 注意，Slide 上可能有个笔误，写成了 “DelivervedLedger”，实际就是 `observedAttributes`。 一旦计数属性变化，浏览器就会自动调用 `attributeChangedCallback` 回调函数。在这里面，我们要做两件事： 1. 重新渲染按钮的 HTML，好让界面上显示的数字更新。 2. 重新绑定事件监听器，这样按钮才能正常工作。 因为渲染按钮这段代码在 `connectedCallback`（组件连上 DOM 时）也要用，我们把它抽成一个 `renderButton` 方法，避免重复。这样代码干净又好维护。 最后，增量处理函数（比如每点一次加一那个方法）里，我用 `.bind(this)` 来保持函数的上下文。有些同学习惯用箭头函数，这里 `.bind(this)` 也是同样效果，就是让方法里的 `this` 一直指向组件实例，不会跑丢。 什么时候用这种模式呢？ 就是当你的组件状态需要，从外面，来设置的时候，比如别人通过 `setProperty` 或者直接赋值来改 `count`，而你的 UI 又必须立即跟着变。这个模式就是专门解决这种场景的。 简单总结： - 用 `getter/setter` 同步属性和特性 - 用 `observedAttributes` 盯住变化 - 在 `attributeChangedCallback` 里刷新界面 - 把重复渲染逻辑抽成方法 - 用 `.bind(this)` 保住上下文 这样，你的组件就健壮又好用了。下节课我们配上例子看一眼代码，就更清楚啦。