image.png

    1. observer:监听者，监听视图模型data的变化
    2. 检测到变化，触发Object.defineProperty下面的set函数,循环通知观察者列表中的成员
    3. Dep:观察者列表，接收通知以后执行watcher给的回调
    4. watcher添加观察者列表
    5. 重点：三个角色是重点

    16-mvvm设计模式/生命周期 - 图2

    • 关于dom的操作在mounted之前都不能实现（this.$refs）
    • 数据双向绑定渲染在created里面以及之后的生命周期里实现
    • 关于dom的操作如果一定要写在mounted之前，则需使用this.$nextTick()

    index.html

    1. <html lang="en">
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    6.     <title>MVVM</title>
    7. </head>
    8. <body>
    9.     <div id="app">
    10.         <h2>{{title}}</h2>
    11.         <button v-on:click="clickMe">点我</button><br/>
    12.         <input type="text" v-model="name">
    13.         <h1>{{name}}</h1>
    14.     </div>
    15.     <script src="js/observer.js"></script>
    16.     <script src="js/watcher.js"></script>
    17.     <script src="js/compile.js"></script>
    18.     <script src="js/index.js"></script>
    19.     <script>
    20.         new Vue({
    21.             el:'#app',
    22.             data:{
    23.                 title:'vue source code',
    24.                 name:'mooc',
    25.                 // age:10
    26.             },
    27.             methods:{
    28.                 clickMe(){
    29.                     this.title="vue click "
    30.                 }
    31.             },
    32.             // mounted:function(){
    33.             //     window.setTimeout(()=>{
    34.             //         this.title="3000s later"
    35.             //     },3000)
    36.             // }
    37.         })
    38.     </script>
    39. </body>
    40. </html>

    index.js

    1. function Vue (options) {
    2.     var self = this;
    3.     this.data = options.data;
    4.     this.methods = options.methods;
    6.     Object.keys(this.data).forEach(function (key) {
    7.         self.proxyKeys(key);
    8.     });
    10.     observe(this.data);
    11.     new Compile(options.el, this);
    12.     // options.mounted.call(this); // 所有事情处理好后执行mounted函数
    13. }
    15. Vue.prototype = {
    16.     proxyKeys: function (key) {
    17.         var self = this;
    18.         Object.defineProperty(this, key, {
    19.             enumerable: false,
    20.             configurable: true,
    21.             get: function () {
    22.                 console.log("get",key)
    23.                 return self.data[key];
    24.             },
    25.             set: function (newVal) {
    26.                 console.log("set",key)
    27.                 self.data[key] = newVal;
    28.             },
    29.         });
    30.     },
    31. };

    observer.js

    1. function Observer (data) {
    2.     this.data = data;
    3.     this.walk(data);
    4. }
    6. Observer.prototype = {
    7.     walk: function (data) {
    8.         var self = this;
    9.         Object.keys(data).forEach(function (key) {
    10.             self.defineReactive(data, key, data[key]);
    11.         });
    12.     },
    13.     defineReactive: function (data, key, val) {
    14.         var dep = new Dep();
    15.         var childObj = observe(val);
    16.         Object.defineProperty(data, key, {
    17.             enumerable: true,
    18.             configurable: true,
    19.             get: function getter () {
    20.                 if (Dep.target) {
    21.                     dep.addSub(Dep.target);
    22.                 }
    23.                 return val;
    24.             },
    25.             set: function setter (newVal) {
    26.                 if (newVal === val) {
    27.                     return;
    28.                 }
    29.                 val = newVal;
    30.                 dep.notify();
    31.             },
    32.         });
    33.     },
    34. };
    36. function observe (value, vm) {
    37.     if (!value || typeof value !== 'object') {
    38.         return;
    39.     }
    40.     return new Observer(value);
    41. }
    43. function Dep () {
    44.     this.subs = [];
    45. }
    46. Dep.prototype = {
    47.     addSub: function (sub) {
    48.         this.subs.push(sub);
    49.     },
    50.     notify: function () {
    51.         this.subs.forEach(function (sub) {
    52.             sub.update();
    53.         });
    54.     },
    55. };
    56. Dep.target = null;

    watcher.js

    1. function Watcher (vm, exp, cb) {
    2.     this.cb = cb;
    3.     this.vm = vm;
    4.     this.exp = exp;
    5.     this.value = this.get();  // 将自己添加到订阅器的操作
    6. }
    8. Watcher.prototype = {
    9.     update: function () {
    10.         this.run();
    11.     },
    12.     run: function () {
    13.         var value = this.vm.data[this.exp];
    14.         var oldVal = this.value;
    15.         if (value !== oldVal) {
    16.             this.value = value;
    17.             this.cb.call(this.vm, value, oldVal);
    18.         }
    19.     },
    20.     get: function () {
    21.         Dep.target = this;  // 缓存自己
    22.         var value = this.vm.data[this.exp];  // 强制执行监听器里的get函数
    23.         Dep.target = null;  // 释放自己
    24.         return value;
    25.     },
    26. };

    compile.js

    1. function Compile (el, vm) {
    2.     this.vm = vm;
    3.     this.el = document.querySelector(el);
    4.     this.fragment = null;
    5.     this.init();
    6. }
    8. Compile.prototype = {
    9.     init: function () {
    10.         if (this.el) {
    11.             this.fragment = this.nodeToFragment(this.el);
    12.             this.compileElement(this.fragment);
    13.             this.el.appendChild(this.fragment);
    14.         } else {
    15.             console.log('Dom元素不存在');
    16.         }
    17.     },
    18.     nodeToFragment: function (el) {
    19.         var fragment = document.createDocumentFragment();
    20.         var child = el.firstChild;
    21.         while (child) {
    22.             // 将Dom元素移入fragment中
    23.             fragment.appendChild(child);
    24.             child = el.firstChild;
    25.         }
    26.         return fragment;
    27.     },
    28.     compileElement: function (el) {
    29.         var childNodes = el.childNodes;
    30.         var self = this;
    31.         [].slice.call(childNodes).forEach(function (node) {
    32.             var reg = /\{\{(.*)\}\}/;
    33.             var text = node.textContent;
    35.             if (self.isElementNode(node)) {
    36.                 self.compile(node);
    37.             } else if (self.isTextNode(node) && reg.test(text)) {
    38.                 self.compileText(node, reg.exec(text)[1]);
    39.             }
    41.             if (node.childNodes && node.childNodes.length) {
    42.                 self.compileElement(node);
    43.             }
    44.         });
    45.     },
    46.     compile: function (node) {
    47.         var nodeAttrs = node.attributes;
    48.         var self = this;
    49.         Array.prototype.forEach.call(nodeAttrs, function (attr) {
    50.             var attrName = attr.name;
    51.             if (self.isDirective(attrName)) {
    52.                 var exp = attr.value;
    53.                 var dir = attrName.substring(2);
    54.                 if (self.isEventDirective(dir)) {  // 事件指令
    55.                     self.compileEvent(node, self.vm, exp, dir);
    56.                 } else {  // v-model 指令
    57.                     self.compileModel(node, self.vm, exp, dir);
    58.                 }
    59.                 node.removeAttribute(attrName);
    60.             }
    61.         });
    62.     },
    63.     compileText: function (node, exp) {
    64.         var self = this;
    65.         var initText = this.vm[exp];
    66.         this.updateText(node, initText);
    67.         new Watcher(this.vm, exp, function (value) {
    68.             self.updateText(node, value);
    69.         });
    70.     },
    71.     compileEvent: function (node, vm, exp, dir) {
    72.         var eventType = dir.split(':')[1];
    73.         var cb = vm.methods && vm.methods[exp];
    75.         if (eventType && cb) {
    76.             node.addEventListener(eventType, cb.bind(vm), false);
    77.         }
    78.     },
    79.     compileModel: function (node, vm, exp, dir) {
    80.         var self = this;
    81.         var val = this.vm[exp];
    82.         this.modelUpdater(node, val);
    83.         new Watcher(this.vm, exp, function (value) {
    84.             self.modelUpdater(node, value);
    85.         });
    87.         node.addEventListener('input', function (e) {
    88.             var newValue = e.target.value;
    89.             if (val === newValue) {
    90.                 return;
    91.             }
    92.             self.vm[exp] = newValue;
    93.             val = newValue;
    94.         });
    95.     },
    96.     updateText: function (node, value) {
    97.         node.textContent = typeof value === 'undefined' ? '' : value;
    98.     },
    99.     modelUpdater: function (node, value, oldValue) {
    100.         node.value = typeof value === 'undefined' ? '' : value;
    101.     },
    102.     isDirective: function (attr) {
    103.         return attr.indexOf('v-') == 0;
    104.     },
    105.     isEventDirective: function (dir) {
    106.         return dir.indexOf('on:') === 0;
    107.     },
    108.     isElementNode: function (node) {
    109.         return node.nodeType == 1;
    110.     },
    111.     isTextNode: function (node) {
    112.         return node.nodeType == 3;
    113.     },
    114. };