目标：

  • 完成数据的双向绑定
  • 完成v-bind
  • 完成v-on
  • 完成v-if

学习Proxy，掌握其原理

  1.   let object = { num: 0, name: 'liming' };
  2.       // 根据observed包装后，在get的时候获取值，set的时候修改值
  3.       function reactive(obj) {
  4.         let observed = new Proxy(obj, {
  5.           get: function (obj, prop) {
  6.             // obj代表所以对象 {name: "张三", age:12}  props 代表获取谁
  7.             console.log(obj, prop);
  8.             return obj[prop];
  9.           },
  10.           set: function (obj, prop, value) {
  11.             // obj代表所以对象 {name: "张三", age:12} props 代表替换谁 value 代表要替换的值
  12.             console.log(obj, prop, value);
  13.             obj[prop] = value;
  14.             return true;
  15.           },
  16.         });
  17.         return observed;
  18.       }
  19.       let result = reactive(object);
  20.       console.log(result.num, '///');
  21.       result.name = 'xiaohua';
  22.       console.log(object, 'object');

实现简化版的RockVue

  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 id="app">
  10.       {{message}}
  11.       <input v-model="message" />
  14.     </div> -->
  16.     <!-- <div id="app-2">
  17.       <span v-bind:title="message">
  18.         鼠标悬停几秒钟查看此处动态绑定的提示信息！
  19.       </span>
  20.     </div> -->
  22.     <!-- <div id="app-5">
  23.       <p>{{ message }}</p>
  24.       <button v-on:click="reverseMessage">反转消息</button>
  25.     </div> -->
  27.     <div id="app-3">
  28.       <p v-if="seen">现在你看到我了</p>
  29.       <button v-on:click="reverseSeen">反转消息</button>
  30.     </div>
  31.   </body>
  32.   <script type="module">
  33.     import { RockVue as Vue } from './rockVue.js';
  34.     new Vue({
  35.       el: '#app-3',
  36.       data: {
  37.         seen: false,
  38.       },
  39.       methods: {
  40.         reverseMessage: function () {
  41.           this.message = this.message.split('').reverse().join('');
  42.         },
  43.         reverseSeen: function () {
  44.           this.seen = !this.seen;
  45.           // console.log(this.seen, ' this.seen');
  46.         },
  47.       },
  48.     });
  49.   </script>
  50. </html>
  1. export class RockVue {
  2.   constructor(config) {
  3.     this.template = document.querySelector(config.el);
  4.     this.data = reactive(config.data);
  5.     // 处理method的方法
  6.     for (const name in config.methods) {
  7.       this[name] = () => {
  8.         config.methods[name].apply(this.data);
  9.       };
  10.     }
  11.     this.traversal(this.template);
  12.   }
  13.   traversal(node) {
  14.     if (node.nodeType === Node.TEXT_NODE) {
  15.       if (node.textContent.trim().match(/^{{([\s\S]+)}}$/)) {
  16.         let name = RegExp.$1.trim();
  17.         effect(() => (node.textContent = this.data[name]));
  18.       }
  19.     }
  20.     if (node.nodeType === Node.ELEMENT_NODE) {
  21.       let attributes = node.attributes;
  22.       console.log(attributes, 'attributes');
  23.       for (let attribute of attributes) {
  24.         // v-model
  25.         if (attribute.name === 'v-model') {
  26.           let name = attribute.value;
  27.           effect(() => (node.value = this.data[name]));
  28.           node.addEventListener('input', (event) => {
  29.             this.data[name] = node.value;
  30.           });
  31.         }
  32.         // v-bind title
  33.         if (attribute.name.match(/^v\-bind:([\s\S]+)$/)) {
  34.           let attrname = RegExp.$1;
  35.           let name = attribute.value;
  36.           effect(() => node.setAttribute(attrname, this.data[name]));
  37.         }
  39.         // v-on 事件处理
  40.         if (attribute.name.match(/^v\-on:([\s\S]+)$/)) {
  41.           let eventName = RegExp.$1;
  42.           let fnname = attribute.value;
  43.           node.addEventListener(eventName, this[fnname]);
  44.         }
  46.         // v-if 条件处理
  47.         if (attribute.name === 'v-if') {
  48.           let value = attribute.value;
  49.           effect(() => {
  50.             node.style.display = this.data[value] ? 'block' : 'none';
  51.           });
  52.         }
  53.       }
  54.     }
  56.     if (node.childNodes && node.childNodes.length) {
  57.       for (let child of node.childNodes) {
  58.         this.traversal(child);
  59.       }
  60.     }
  61.   }
  62. }
  64. let effects = new Map();
  65. let currentEffect = null;
  67. function effect(fn) {
  68.   currentEffect = fn;
  69.   fn();
  70.   currentEffect = null;
  71. }
  73. function reactive(obj) {
  74.   let observed = new Proxy(obj, {
  75.     get: function (obj, prop) {
  76.       // obj代表所以对象 {name: "张三", age:12}  props 代表获取谁
  77.       // console.log(obj, prop);
  78.       if (currentEffect) {
  79.         if (!effects.has(obj)) effects.set(obj, new Map());
  80.         if (!effects.get(obj).has(prop))
  81.           effects.get(obj).set(prop, new Array());
  82.         effects.get(obj).get(prop).push(currentEffect);
  83.       }
  84.       return obj[prop];
  85.     },
  86.     set: function (obj, prop, value) {
  87.       // obj代表所以对象 {name: "张三", age:12} props 代表替换谁 value 代表要替换的值
  88.       // console.log(obj, prop, value);
  89.       window.obj = obj;
  90.       obj[prop] = value;
  91.       if (effects.has(obj) && effects.get(obj).has(prop)) {
  92.         for (let effect of effects.get(obj).get(prop)) {
  93.           effect();
  94.         }
  95.       }
  96.       return true;
  97.     },
  98.   });
  99.   return observed;
  100. }
  101. // console.log(effects, 'effects');
  102. // window.effects = effects;

原理说明

主要通过Proxy对对象进行绑定监听处理，通过new Map对对象的属性操作进行处理，将要执行的函数匹配到存到对应的prop上面，通过每次的访问触发get方法，进行存方法的操作，通过修改触发set的方法，此时执行回调监听的函数，这样达到修改数据和视图的