vue模板实现3-数据绑定

这次的改进加入了数据绑定，即更改数据时，视图同步更新。使用了 Object.defineProperty() 方法，每次 set 的时候，将整个视图重新遍历。这种方式很低效，后续会继续改进。

const handleStr = (str, data) => {               // 
  const reg = /{{\w+}}/g
  const arr = str.match(reg) || []

  arr.forEach((item)=>{
    const key = item.slice(2, -2)
    
    if(data[key] === undefined) {
      str = str.replace(item, '')
      console.error(`[vue warn] ${key} is undefined`)
    }
    else {
      str = str.replace(item, data[key])
    }
  })
  
  return str
}

const traverse = (node, data) => {                    // 遍历
  node.childNodes.forEach(item => {
    if(item.nodeName === '#text'){
      item.textContent = handleStr(item.textContent, data)
    }
    else {
      traverse(item, data)
    }
  });
}

class Vue {
  constructor(obj) {
    const {el, data} = obj
    const node = document.querySelector(el)

    this.data = data

    const nodeCopy = node.cloneNode(true)

    traverse(node, data)

    for(let key in data) {
      let value = data[key]
      Object.defineProperty(data, key, {
        get() {
          return value
        },
        set(v) {
          value = v
          const copy = nodeCopy.cloneNode(true)
          traverse(copy, data)
          node.innerHTML = copy.innerHTML
        }
      })
    }    
  }
}