MVVM如何做到局部更新

Question

最近打算自己写一个简单的MVVM，已经实现了编译和数据绑定，但是在数据发生改变时如何找到对应的DOM节点进行更新?具体怎么实现？

Answer 1

正好我前几天做着玩做了这个，也是嫌虚拟 dom 麻烦，所以我在第一步渲染 html 的时候就把所有绑定了数据的 dom 节点拿了出来，单独传给 observer，在 observer set 的时候给所有传进来的节点改变一下数据，就实现了局部刷新。不过这么实现并不好，而且局限性大，只能说是比较简单的能做着玩玩。随便写个伪代码给你吧

Observer(elements, instruct) {
  Object.defineProperty(data, instruct, {
    set(newVal) {
      elements.map((el) => {
        el.nodeValue = newVal
      })
    }
  })
}

Answer 2

简单的说是, 比较原来dom节点数据和现在数据的不同, diff 算法, virtual dom的优势可能就在这里, 直接比较数据就能得到diff的地方, 然后更新dom, 要局部更新, diff算法绕不开把

Answer 3

我也在实现中。。 有个想法还没实现，可以试试

1. 把模板抽象成多个render函数
2. 初次渲染收集依赖的时候，每个属性单独收集自己的依赖
3. 属性设置的时候，仅对这个属性相关的依赖render函数进行更新

Answer 4

可以看看这篇文章 230行实现一个简单的MVVM