Vue数据双向绑定实现原理

Vue数据双向绑定（即数据响应式），是利用了Object.defineProperty()这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue knowledge</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="school.name">
        <div>{{school.name}}</div>
        <div>{{school.age}}</div>
    </div>
    <script src="./mvvm.js"></script>
    <script>
        let vm = new Mvvm({
            el : '#app',
            data : {
                school : {
                    age :18,
                    name : 'vanlus'
                }
            }
        })
    </script>
</body>
</html>

mvvm.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
// 基类 调度
class Mvvm{
    constructor(options){
        this.$el = options.el;
        this.$data = options.data;
        if(this.$el){
            // 把数据 全部转化用Object.definedProperty来定义
            new Observer(this.$data);

            new Compiler(this.$el,this);
        }
    }
}

// 编译（用于将基类中的数据渲染到视图中）
class Compiler{
    constructor(el,vm){
        this.vm = vm;
        // 判断el属性是不是一个元素，如果不是元素，那就获取他
        this.el = this.isElementNode(el)?el:document.querySelector(el);

        // 把当前节点中的元素获取到放在内存中
        let fragment = this.node2fragment(this.el);

        // 把内存节点中的内容(变量)进行替换
        this.compile(fragment);
        // 把内存节点再塞到页面中
        this.el.appendChild(fragment);
    }
    // 判断时候是元素节点
    isElementNode(node){
        return node.nodeType == 1;
    }
    // 把节点移动到内存中
    node2fragment(node){
        // 创建一个文档碎片
        let fragment = document.createDocumentFragment();
        let firstChild;
        // 循环将node节点中的子元素一条一条地插到文档碎片中
        while(firstChild = node.firstChild){
            // appendChild具有移动性
            fragment.appendChild(firstChild);
        }

        return fragment;
    }
    // 用来编译内存中的dom节点
    compile(node){
        let childNodes = node.childNodes;
        [...childNodes].forEach(child=>{
            if(this.isElementNode(child)){
                this.compileElement(child);
                // 如果是元素的话，需要把自己传进去，再去遍历子节点
                this.compile(child);
            }else{
                this.compileText(child);
            }
        })
    }
    // 编译元素的
    compileElement(node){
        let attributes = node.attributes;   // 类数组
        [...attributes].forEach(attr=>{
            // type="text" v-model="school.name"
            let {name,value:expr} = attr;
            if(this.isDirective(name)){
                let [,directive] = name.split('-');
                // 需要调用不同的指令来处理
                CompileUtil[directive](node,expr,this.vm);

            }
        })
    }
    // 编译文本的，判断当前文本节点内容中是否包含{{}}
    compileText(node){
        let content = node.textContent;
        if(/\{\{(.+?)\}\}/.test(content)){
            CompileUtil['text'](node,content,this.vm);
        }
    }
    // 是否是指令，例如v-model
    isDirective(attrName){
        return attrName.startsWith('v-');
    }
}

CompileUtil = {
    setValue(vm,expr,value){
        expr.split('.').reduce((data,current,index,arr)=>{
            if(index == arr.length-1){
                data[current] = value;
            }
            return data[current];
        },vm.$data)
    },
    // node是节点 expr是表达式（school.name） vm是当前实例(vm.$data)
    model(node,expr,vm){
        // 给输入框加一个观察者，如果稍后数据更新了，会触发此方法，给输入框赋予新值
        new Watcher(vm,expr,(newVal)=>{
            node.value = newVal;
        });
        node.addEventListener('input',(e)=>{
            let value = e.target.value; // 获取用户输入的内容
            this.setValue(vm,expr,value);
        })
        // 给输入框赋予value属性 node.value = xxx
        let value = this.getVal(vm,expr);
        node.value = value;
    },

    getContentValue(vm,expr){
        // 遍历表达式,将内容替换成一个新的完整的内容返还回去
        return expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
            return this.getVal(vm,args[1]);
        })
    },

    text(node,expr,vm){
        // expr => {{a}} {{b}} {{c}}
        let content = expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
            // 给表达式每个{{}}都加上观察者
            new Watcher(vm,args[1],()=>{
                node.textContent = this.getContentValue(vm,expr) 
            })
            return this.getVal(vm,args[1]);
        })
        node.textContent = content;
    },
    // 给一个expr，就去vm中取到对应的值
    getVal(vm,expr){
        // 'school.name' => ['school','name']
        // vm.$data['school']['name']
        return expr.split('.').reduce((data,current)=>{
            return data[current];
        },vm.$data)
    }
}

// 实现数据劫持
class Observer{
    constructor(data){
        this.observer(data);
    }
    observer(data){
        // 如果是对象才观察
        if(data && typeof data == 'object'){
            for(let key in data){
                this.defineReactive(data,key,data[key]);
            }
        }
    }
    defineReactive(obj,key,value){
        this.observer(value);
        // 给每一个属性都加上一个具有发布订阅功能
        let dep = new Dep();
        Object.defineProperty(obj,key,{
            get(){
                // 创建watcher时，会取到对应的内容，并把watcher放到了全局上
                Dep.target && dep.addSub(Dep.target);
                return value
            },
            set:(newVal)=>{    // {school:{name:'vanlus'}} => this.school={} => {school:{}}
                if(newVal != value){
                    this.observer(newVal);
                    value = newVal;
                    dep.notify();
                }
            }
        })
    }
}

// 观察者（发布订阅）
class Watcher{
    constructor(vm,expr,cb){
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;
        // 默认先存放一个老值
        this.oldValue = this.get();
    }
    // 因为数据劫持，这里一取值就会调数据劫持中的get()方法
    get(){
        Dep.target = this;
        // 取值，然后把观察者和数据关联起来
        let value = CompileUtil.getVal(this.vm,this.expr);
        Dep.target = null;
        return value;
    }
    // 更新操作，数据变化后，会调用观察者的update方法
    update(){
        let newVal = CompileUtil.getVal(this.vm,this.expr);
        if(newVal != this.oldValue){
            this.cb(newVal);
        }
    }
}

class Dep{
    constructor(){
        this.subs = []; //存放所有的watcher
    }
    // 添加订阅
    addSub(watcher){
        this.subs.push(watcher);
    }
    // 发布
    notify(){
        this.subs.forEach(watcher=>watcher.update());
    }
}
技术
vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！