VUE源码学习(1)-vue核心内容简单实现1 #33

iliuyt · 2019-03-11T07:57:03Z

知识点

虚拟dom的使用createDocumentFragment,关机在于可以通过更改node的textContent来更新数据
属性设置的使用defineProperty，如何通过defineProperty来设置getter 和 setter，这里非常重要

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Vue</title>
</head>
<style>
  #app {
    text-align: center;
  }
</style>

<body>
  <div id="app">
    <p id="vdom">初始化中</p>
  </div>
</body>
<script>

  // 被监听的数据
  let data = { message: "" };

  // 虚拟dom集合
  let nodes = [];

  // 设置虚拟dom
  let el = document.querySelector("#app");
  const fragment = document.createDocumentFragment();
  let child = document.querySelector("#vdom");;
  fragment.appendChild(child)
  nodes.push(fragment.childNodes[0])
  el.appendChild(fragment)


  // 设置监听
  let watcher = {
    update() {
      // 更新dom
      nodes[0].textContent = data.message
    }
  };

  // 监听和分发集合
  let dep = {
    subs: [],
    notify() {
      this.subs.forEach(item => {
        item.update();
      })
    }
  }

  // 设置监听数据的getter和setter
  Object.defineProperty(data, 'message', {
    enumerable: true,
    configurable: true,
    get() {
      return this.value;
    },
    set(newVal) {
      // 如果值一样，不更新dom
      if (newVal === this.value) {
        return;
      }
      this.value = newVal;
      // 触发所有监听
      dep.notify();
    }
  });

  // 添加监听到集合中
  dep.subs.push(watcher)

  // 定时更新数据，更新dom
  setInterval(() => {
    data.message = "当前时间戳为：" + Date.now()
  }, 1000);
</script>

</html>

The text was updated successfully, but these errors were encountered:

iliuyt changed the title ~~VUE源码学习(1)-vue核心内容简单实现~~ VUE源码学习(1)-vue核心内容简单实现1 Mar 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VUE源码学习(1)-vue核心内容简单实现1 #33

VUE源码学习(1)-vue核心内容简单实现1 #33

iliuyt commented Mar 11, 2019 •

edited

Loading

VUE源码学习(1)-vue核心内容简单实现1 #33

VUE源码学习(1)-vue核心内容简单实现1 #33

Comments

iliuyt commented Mar 11, 2019 • edited Loading

知识点

iliuyt commented Mar 11, 2019 •

edited

Loading