根据Object.defineProperty 获取对象中属性值与属性值改变时的触发时机

  1. let obj = {};
  2. let userName = "rock"
  3. Object.defineProperty(obj, 'userName', {
  4.   get() {
  5.     // 添加依赖
  6.     return userName;
  7.   },
  8.   set(newVal) {
  9.     // 更新依赖
  10.     console.log(newVal, 'setter')
  11.     userName = newVal;
  12.   }
  13. })
  14. obj.userName
  15. "rock"
  16. obj.userName = '12'
  17. 12 setter
  18. "12"

极简版的Vue

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <div class="app">
  10.       <h3>极简版vue</h3>
  11.       <div class="userName">{{userName}}</div>
  12.       <div class="description">{{description}}</div>
  13.       <input type="text" v-modal="userName" />
  14.       <input type="text" v-modal="description" />
  15.     </div>
  16.   </body>
  17.   <script src="./1.js"></script>
  18.   <script>
  19.     window.onload = function () {
  20.       let app = new Vue({
  21.         el: '.app',
  22.         data: {
  23.           userName: '我是rock++',
  24.           description: '前端技术学习',
  25.         },
  26.       });
  27.     };
  28.   </script>
  29. </html>
  2. let targetNodes = [];
  3. let target = null;
  5. function defineReactive(data) {
  6.   Object.keys(data).forEach(key => {
  7.     let val = data[key];
  8.     let dep = new Dependence();
  9.     Object.defineProperty(data, key, {
  10.       get() {
  11.         // 添加依赖
  12.         dep.push();
  13.         targetNodes.push(val)
  14.         return val
  15.       },
  16.       set(newVal) {
  17.         dep.notify(newVal)
  18.         val = newVal;
  19.       }
  20.     })
  21.   })
  22.   return data
  23. }
  25. class Dependence {
  26.   static target = null;
  27.   targetNodes = [];
  28.   push() {
  29.     if (Dependence.target) {
  30.       this.targetNodes.push(Dependence.target)
  31.     }
  32.   }
  33.   notify(value) {
  34.     console.log(value, this)
  35.     this.targetNodes.forEach(node => {
  36.       node.textContent = value
  37.     })
  38.   }
  39. }
  41. function compile(data, template) {
  42.   let children = template.children;
  43.   for (let i = 0; i < children.length; i++) {
  44.     let childEl = children[i];
  45.     if (childEl.matches("[v-modal]")) {
  46.       let attr = childEl.getAttribute("v-modal");
  47.       childEl.value = data[attr];
  48.       childEl.addEventListener("input", function (ev) {
  49.         data[attr] = ev.target.value
  50.       })
  51.     } else {
  52.       const content = childEl.textContent;
  53.       const regexp = /{{(.+?)\}\}/;
  54.       const match = content?.match(regexp);
  55.       if (match) {
  56.         const key = match[1];
  57.         Dependence.target = childEl;
  58.         childEl.innerText = data[key]
  59.         Dependence.target = null
  60.       }
  61.     }
  62.   }
  63. }
  65. class Vue {
  66.   constructor({ el, data }) {
  67.     let templateNode = document.querySelector(el);
  68.     const observeableData = defineReactive(data);
  69.     console.log(observeableData, 'observeableData')
  70.     compile(observeableData, templateNode);
  71.     console.log(Dependence.targetNodes, '>targetNodes>')
  72.   }
  73. }