这不是什么难事，一般来说没必要动用虚拟DOM。

今年早些时候我写了一篇文章，声称Web组件最终将取代前端框架。

这篇文章引起了很多争议，这大大出乎我的意料，但也让我收获良多。有很多人同意我的观点，也有很多人持否定态度，甚至有人觉得我根本就是脑子进水，应该永远禁止我再写代码了。总的来说，争论的双方都提出了很不错的观点。

批评声音主要指出现有的框架提供了一种通过数据绑定编写视图的声明式途径，这是原生Web组件天生不具备的能力。这一观点本身没错，但其实Web组件是很容易实现数据绑定的，我将在本文中演示具体做法。

声明式数据绑定的情况

数据绑定最早是被Angular、Backbone和Ember等框架推广而流行开来的，现在则在某种程度上是编写视图的标准途径。它能让“视图作为数据的函数”，意味着每当某些数据发生变化时，相关视图将“自动”更新。

不需要冗长的DOM操作来保持数据和视图同步，只需更新数据，视图就会随之变化。这是一项杀手级功能，如今但凡理智的开发人员就会用它。所以很容易理解为什么开发人员会使用提供了数据绑定功能的框架，就算框架对于应用来说太大材小用也无所谓：既然框架打理好了一切，何必要费心费力处理那些麻烦的DOM操作呢？

但数据绑定并不是什么魔法，你用不着为了用它而动用整个框架。在Web组件里只需要几行代码就能轻松搞定数据绑定了，没什么特殊的。

如何实现

就像我上面说的那样，数据绑定并没有那么神奇。当基础数据发生变化时，你的视图不是凭空“神奇”地更新的。在框架深处，不为人知的某个角落里的设置代码负责在数据更改时调用并更新视图。

AngularJS使用了所谓的“摘要循环”：这是一种粗暴的检查机制，不断检查哪些数据已更改，以便随时更新对应的视图。

React面世时提供了另一种据称性能更好的解决方案，称为虚拟DOM：它是一种DOM的JavaScript表示，只更新已更改的DOM部分。这对列表来说很合适——列表的少数项目发生变化时无需重新渲染整个列表，只需更新已更改的项目。

哪种工具最合适？

图源：https://xkcd.com/974/

这对于具有复杂UI的较大应用程序来说非常有用，但对于大多数应用程序来说实在有些杀鸡用牛刀了。编写一些监视数据的代码并在数据发生变化时更新相关视图并不是什么难事。问题是这些数据通常需要传递给也需要数据绑定的子组件，所以最后往往会有很多DOM操作。

你需要的是一种在数据被推送到子组件时触发子组件中相同的数据绑定操作的方法。只要父组件的数据发生更改并且某些数据绑定到子组件的视图，该子组件的视图也需要更新。

一种方法是利用所有组件的基类，因为Web组件是使用JavaScript类创建的，所以这是一个很好的选择。默认情况下Web组件扩展HTMLElement，但我们也可以创建自己的基类来扩展HTMLElement，如下所示：

export class CustomElement extends HTMLElement

然后我们创建的每个Web组件都扩展了这个CustomElement基类：

export class MyComponent extends CustomElement

如果你想直接查看代码，可以访问Github链接。

我们将CustomElement的内部state属性绑定到视图来实现数据绑定：

class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.state = {};
  }
}

我的第一个想法是将this.state实现为Proxy，这样state对象的任何突变都将被自动拦截；但由于Proxy可能会影响性能，因此我决定实现一个setter，它还能同时设置多个属性：

class CustomElement extends HTMLElement {
  ...
  setState(newState) {
    Object.entries(newState)
    .forEach(([key, value]) => {
      this.state[key] = this.isObject(this.state[key]) &&   
      this.isObject(value) ? {...this.state[key], ...value} : value;
    });
  }
}

setState方法遍历newState对象的所有条目，并将所有值设置为this.state上的对应属性，随后我们就应该使用这些值来更新视图。

通过标准data属性将值绑定到视图上，在本例中为data-bind：

<p data-bind="title"></p>

这里的textContent绑定到负责管理视图的组件内的this.state.title的值上：

class DemoElement extends CustomElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <p data-bind="title"></p>
    `;
  }
}
const element = document.querySelector('demo-element');
element.setState({title: 'Hello World'});
// the paragraph will now contain the text "Hello World"

这种绑定可以达到任意深度，所以下面这种情况也能做到：

<p data-bind="user.address.city"></p>
element.setState({
  user: {
    address: {
      city: 'Amsterdam'
    }
  }
});
---> <p>Amsterdam</p>

还可以将数据绑定到Web组件的特定属性。在此示例中，数据绑定到的title属性上：

<parent-element>
  <demo-element data-bind="title:name"></demo-element>
</parent-element>
parentElement.setState({name: 'foo'}); //demoElement.title === 'foo'

视图的更新实际是在CustomElement中的updateBindings方法中实现的。通过setState方法更新state时，它会解析更新的属性以查找绑定到这些属性的HTML元素。

例如下面这样：

element.setState({
  user: {
    address: {
      city: 'Amsterdam'
    }
  }
});

更新Web组件内的this.state.user.address.city，并将数据对象中的键转换为user.address.city，然后使用它来查找这个数据绑定的元素：

const elements = this.shadowRoot.querySelectorAll('[data-bind$="user.address.city"]');

这将查找所有的data-bind属性以user.address.city结尾的元素（注意data-bind$结尾的$），因此它将找到data-bind=“user.address.city”，但也可以找到data-bind=“ name:user.address.city“，其中数据专门绑定到name属性。

每当数据绑定到元素的特定属性（如data-bind=“name:user.address.city”）时，组件将检查该元素是否也是扩展CustomElement的Web组件；如果是，则通过它的setState方法更新该属性。这样，数据绑定就能一直传播到所有子组件上。

如果绑定数据的元素是常规HTML元素，那么将简单地更新其textContent。在这两种情况下，只需几行代码即可有效实现DOM的更新。

列表该怎么处理？

像虚拟DOM这样的解决方案真正的用武之地是渲染列表。例如只更改列表的一部分时，虚拟DOM将仅更新已更改的部分，而不是重新渲染整个列表。

其机制是在第一次渲染列表时创建DOM节点，然后在列表更改时只更新这些现有节点（textContent、属性等）。复用已经创建的节点比重新渲染整个列表重建所有节点的开销小得多，因此对于非常大的列表来说这种方法效率更高。

但如果你的列表平均只有25个项目时，你可能会想知道重新渲染整个列表能比虚拟DOM的方法慢多少。当你渲染250个项目时可能会变得很慢，但理智的开发人员在这种情况下就应该分页了。

我不是说大家就应该抛弃虚拟DOM，因为它的确是很棒的技术。如果遇到真正需要虚拟DOM的情况，自然一定要使用它。我只是希望大家遇到比较轻量的问题时先思考一下能不能找到一个比较轻量的解决方案，而不是上来就动用重量级的杀手锏。

customElement演示的Github仓库包含一个Web组件，它在li标签内渲染任何设置为其items属性的字符串数组。只要将items设置为新数组它就会重新渲染整个列表，但是复用现有的li标记也很简单。

结论

答案很清楚了，只需几行代码即可对Web组件进行声明式数据绑定。我觉得自己已经清楚地证明了数据绑定很容易实现，并且你不需要动用整个框架也能使用它。

上面提到的Github仓库中的代码不是React或Vue.js等框架的替代品，本来也没这个意思。框架提供的并不只有数据绑定，本文和涉及的代码是为了证明你不一定需要一个框架来实现声明式数据绑定。

除了数据绑定之外，customElement还提供了一些方便的方法来选择元素以及显示和隐藏元素。

我请大家好好看看我的代码，仔细研究一下，能给我反馈的话我会感激不尽！

英文原文：https://medium.com/swlh/https-medium-com-drmoerkerke-data-binding-for-web-components-in-just-a-few-lines-of-code-33f0a46943b3

创作场景

几行代码就能完成 Web 组件的数据绑定