Store

  1. define('my-first-element', class extends WeElement {
  2.   //You must declare data here for view updating
  3.   static get data() {
  4.     return { name: null }
  5.   }
  7.   onClick = () => {
  8.     //auto update the view
  9.     this.store.data.name = 'abc'
  10.   }
  12.   render(props, data, store) {
  13.     return (
  14.       <h1 onClick={this.onClick}>Hello, {store.data.name}!</h1>
  15.     )
  16.   }
  17. })
  19. const store = {
  20.   data: { name: 'Omi' }
  21. }
  22. render(<my-first-element name="world"></my-first-element>, 'body', store)

当非纯 Element 使用 store 体系时，static get data 就仅仅被用来声明依赖，举个例子:

  1. static get data() {
  2.   return {
  3.     a: null,
  4.     b: null,
  5.     c: { d: [] },
  6.     e: []
  7.   }
  8. }

会被转换成：

  1. {
  2.   a: true,
  3.   b: true,
  4.   'c.d':true,
  5.   e: true
  6. }

举例说明 Path 命中规则:

Proxy Path(由数据更改产生) updatePath(定义在组件的静态data上) 是否更新
abc abc 更新
abc[1] abc 更新
abc.a abc 更新
abc abc.a 不更新
abc abc[1] 不更新
abc abc[1].c 不更新
abc.b abc.b 更新

以上只要命中一个条件就可以进行更新！

总结就是只要等于 updatePath 或者在 updatePath 子节点下都进行更新！

看可以看到 store 体系是中心化的体系？那么怎么做到部分组件去中心化？为自定义元素加上静态属性 pure 并设置为 ture:

  1. static pure = true

纯元素！不会注入 store!