MVVM如何做到局部更新

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

阅读 5.4k
4 个回答

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


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

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

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

  1. 把模板抽象成多个render函数
  2. 初次渲染收集依赖的时候,每个属性单独收集自己的依赖
  3. 属性设置的时候,仅对这个属性相关的依赖render函数进行更新
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题