本文共 2903 字，大约阅读时间需要 9 分钟。

Vue?????????

??

?????Vue?????????????????????????????????????????????????????????????????????????????????????????????????????

??????

Vue??????????????-???????????????????????????????????????????????????????????????????????

???????

Vue??Object.defineProperty?????????????????get?set???????????????????????????????????

??-????

?????????????-?????????Dep???????????????????notify??????????????????????????????????????

????

1. ????Observer

Observer???????????????????????????????get?set???????????????

function defineReactive(data, key, val) {    observe(val); // ?????????    var dep = new Dep();    Object.defineProperty(data, key, {        enumerable: true,        configurable: true,        get: function() {            if (Dep.target) {                dep.addSub(Dep.target);            }            return val;        },        set: function(newVal) {            if (val === newVal) return;            val = newVal;            console.log('??' + key + '?????????????' + newVal.toString() + '?');            dep.notify();        }    });}

2. ????Watcher

Watcher???????????????????????????get?????????????????

function Watcher(vm, exp, cb) {    this.vm = vm;    this.exp = exp;    this.cb = cb;    this.value = this.get();}Watcher.prototype = {    update: function() {        this.run();    },    run: function() {        var value = this.vm.data[this.exp];        var oldVal = this.value;        if (value !== oldVal) {            this.value = value;            this.cb.call(this.vm, value, oldVal);        }    },    get: function() {        Dep.target = this;        var value = this.vm.data[this.exp];        Dep.target = null;        return value;    }};

3. ????Compile

Compile????????????????????JavaScript???????????????????????

function compile(node) {    var nodeAttrs = node.attributes;    Array.prototype.forEach.call(nodeAttrs, function(attr) {        var attrName = attr.name;        if (isDirective(attrName)) {            var exp = attr.value;            var dir = attrName.substring(2);            if (isEventDirective(dir)) {                compileEvent(node, vm, exp, dir);            } else {                compileModel(node, vm, exp, dir);            }            node.removeAttribute(attrName);        }    });}

??????

??????????????????????

?????

????????????SelfVue??

function SelfVue(options) {    var self = this;    this.vm = this;    this.data = options.data;    Object.keys(this.data).forEach(function(key) {        self.proxyKeys(key);    });    observe(this.data);    new Compile(options.el, this);    options.mounted.call(this);}

????

?????????????????

   
    
    
{title}
    
        
    
{name}
   

????????????

• ???????????????
• ????????v-model?????????????
• ???????????????????????

??

???Vue???????????????????????????????????????????????????????Vue????????????