js 数据驱动

Question

目前有这样的一个研究，用 js 进行的增删改查的时候，所有的数据都是来自数组中的，然后通过遍历数组动态生成 dom 节点，然后删除元素的时候，先删除数组中对应的数据，然后视图自动更新，同样的，编辑数据后，数组中的数据更新，然后视图再自动更新，有点类似现在 vue 的数据驱动。目前能实现对 dom 节点的增删改查，但是没有办法实现同时更新数组。

能提供一些思路吗，有代码就更好了，谢谢。

视图类似下面这种：

Answer 1

有点类似现在 vue 的数据驱动。目前能实现对 dom 节点的增删改查，但是没有办法实现同时更新数组。

如果是数据驱动，那么你应该删除数据而不是dom。

以下为伪代码

let data= {users:[{...}]};
let usersCom = new Component(data)

class Component{
    constructor(){
        //遍历传进来的属性
        //object重写get/set
        //数组对象添加push/shift等方法
        //让数据变动的时候根据data的内容重新渲染dom
    }
    render(){
        ...
    }
}

Answer 2

删除DOM的同时删除数组数据不就可以了？在每一行需要绑定代表该行的唯一值，用它去做删除等操作

Answer 3

在删除函数里面更新数据。

Answer 4

这种原生的话，用事件委托吧，拿到对应的下标然后调用数组的splice（index, 1）就行，自己写一个小驱动的话，可以仿vue ，使用Object.defineProperty（list, {set,get}）对数组进行监听，数组每次改变刷新dom就行