Vue响应式原理（含详细代码）_vue原理代码

Vue响应式原理介绍

监听Vue实例中的data选项，我们以下用一个普通的js对象模拟data，用Object.defineProperty进行定义属性值的getter和setter方法。当data选择项中的key进行获取和修改时，Vue内部会调用相应的方法。

主要考虑以下两点：

1. data中数据修改时，Vue内部时如何监听到message数据的改变
   Object.defineProperty
2. 当数据发送改变，Vue是如何知道需要那些模板中用到的key进行页面刷新
   发布者订阅者模式
   注：发布者为dep，订阅者为watcher
   每个data中的属性都会对应一个发布者(dep)对象

响应式原理实现代码：
class Vue{
      constructor(options){
        //1.保存数据
        this.$options = options;
        this.$data = options.data;
        this.$el = options.el;
        //2.将data添加到响应式系统中
        new Observer(this.$data)
        //3.处理el
        new Complier(this.$el, this)
        //4.代理this.$data的数据
        Object.keys(this.$data).forEach(key=>{
        this._proxy(key)
        })
      }
      _proxy(key){
        Object.defineProperty(this, key, {
          configurable: true,
          enumerable: true,
          set(newValue){
            this.$data[key] = newValue
          },
          get(){
            return this.$data[key]
          }
        })
      }
    }

    //将data中的属性加入到相应模式中
    class Observer{
      constructor(data){
        this.data = data

        Object.keys(data).forEach(key=>{
          this.defineReactive(this.data, key, data[key])
        })
      }
      defineReactive(data, key, val){
        //一个属性（key）对应一个发布者对象
        const dep = new Dep()
        Object.defineProperty(data, key, {
          enumerable: true,
          configurable: true,
          //将订阅者加入到subs数组中
          get(){
            if(Dep.target){
              dep.addSub(Dep.target)
            }
            return val
          },
          //数据修改时，通知订阅者
          set(newValue){
            if(newValue === val) return 
            val = newValue
            dep.notify()
          }
        })
      }
    }
	//定义发布者：添加、通知订阅者
    class Dep{
      constructor(){
        this.subs = []
      }
      //
      addSub(sub){
        this.subs.push(sub)
      }
      //订阅者更新时，调用watcher中的update()修改视图中的节点值
      notify(){
        this.subs.forEach(sub=>{
          sub.update()
        })
      }
    }
    
    //订阅者
    class Watcher{
      constructor(node, name, vm){
        this.node = node;
        this.name = name;
        this.vm = vm;
        Dep.target = this;
        this.update()
        Dep.target = null
      }
      update(){
        this.node.nodeValue = this.vm[this.name]
      }
    }
    
    //template编译
    const reg = /\{\{(.+)\}\}/
    class Complier{
      constructor(el, vm){
        this.el = document.querySelector(el)
        this.vm = vm
        this.frag = this._createFragment()
        this.el.appendChild(this.frag)
      }
      _createFragment(){
        const frag = document.createDocumentFragment()

        let child;
        while(child = this.el.firstChild){
          this._compile(child)
          frag.appendChild(child)
        }
        return frag
      }
      _compile(node){
        if(node.nodeType === 1){
          const attrs = node.attributes
          if(attrs.hasOwnProperty('v-model')){
            const name = attrs['v-model'].nodeValue
            node.addEventListener('input',e=>{
              this.vm[name] = e.target.value
            })
          }
        }
        //节点编译时,name为订阅者名字，创建对应的watcher实例
        if(node.nodeType === 3){
          if(reg.test(node.nodeValue)){
            const name = RegExp.$1.trim()
            new Watcher(node, name, this.vm)
          }
        }
      }
    }
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

如果感觉文章对你有帮助，别忘了点个赞哦！！！！！！！！！