好多人对它的理解还是只是知道了大概原理，但是对具体的Vue双向绑定的实现很模糊，因此就出了这篇文章，供大家参考希望可以得到收获，以下是主要代码逻辑，先陈述一下这一过程都需要什么：

需要有一个接收Vue实例配置项的构造函数SimpleVue，给他加两个原型方法分别是observe()和compile()，再构造出一个订阅器watcher，给他加一个更新视图方法

• observe()：用来劫持并监听数据变化的数据监听器，有变化就会通知下文中的订阅器watcher
• compile()：节点DOM解析器，用来获取和解析每一个节点及其指令，根据初始化的模板数据来创建订阅器watcher
• watcher()：订阅器watcher，用来接收属性值的相关数据的变化通知，调用自身原型方法update从而更新视图
  

由于Vue就是一个MVVM的框架理念，所以就要通过Object.defineProperty()方法来劫持并监听所有属性值相关的数据，看看它是否变化，如有变化则通知订阅器watcher看是否需要视图更新，这一过程就是我们的数据监听器observe的工作任务，由于数据和订阅器是一对多的关系，所以通知订阅器的时候需要把数据对应的订阅器的集合都放在一个oWatcherObj对象中，接下来需要一个节点DOM解析器compile，主要用来迭代递归获取和解析每一个节点及其指令，根据初始化的模板数据来创建订阅器watcher，实例化watcher就会接到数据变化的通知，进而实现VM更新视图

1. template：
   
2. 
   
3. <div id="simpleVue">
   
4. 
   
5. <button yf-on:click="copy">戳我</button>
   
6. 
   
7. <div>
   
8. 
   
9. <textarea yf-model="name"></textarea>
   
10. 
    
11. <div yf-text="name"></div>
    
12. 
    
13. </div>
    
14. 
    
15. <hr>
    
16. 
    
17. <button yf-on:click="show">显示/隐藏</button>
    
18. 
    
19. <div yf-if="isShow">
    
20. 
    
21. <input type="text" yf-model="webSite">
    
22. 
    
23. <div yf-text="webSite"></div>
    
24. 
    
25. </div>
    
26. 
    
27. </div>
    
28. 
    
29. SimpleVue构造：
    
30. 
    
31. class SimpleVue { // 简化版Vue实例的构造 用来接收实例的配置项
    
32. 
    
33. constructor(options) {
    
34. 
    
35. this.$el = document.querySelector(options.el);
    
36. 
    
37. this.$data = options.data;
    
38. 
    
39. this.$methods = options.methods;
    
40. 
    
41. this.oWatcherObj = {}; // 所有属性值相关的数据对应的订阅器的集合都放在该对象中
    
42. 
    
43. this.observe(); // 调用数据监听器对属性值相关的数据进行劫持并监听
    
44. 
    
45. this.compile(this.$el); // 对该DOM节点进行解析
    
46. 
    
47. }
    
48. 
    
49. observe() { // 数据监听器 用来劫持并监听属性值相关数据的变化 如有变化则通知订阅器watcher
    
50. 
    
51. for (let key in this.$data) {
    
52. 
    
53. let value = this.$data[key];
    
54. 
    
55. this.oWatcherObj[key] = []; // 初始化该数据的订阅器 数据和订阅器的关系是一对多
    
56. 
    
57. let oWatcherObj = this.oWatcherObj[key];
    
58. 
    
59. Object.defineProperty(this.$data, key, { // 关键方法 可以修改对象身上的默认属性值的ES5方法 下面用到的是ES中两大属性中的访问器属性,有以下四种描述符对象
    
60. 
    
61. configurable: false, // 该状态下的属性描述符不能被修改和删除
    
62. 
    
63. enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
    
64. 
    
65. get() { // 属性值相关的数据读取函数
    
66. 
    
67. return value;
    
68. 
    
69. },
    
70. 
    
71. set(newVal) { // 属性值相关的数据写入函数
    
72. 
    
73. if (newVal !== value) {
    
74. 
    
75. value = newVal;
    
76. 
    
77. oWatcherObj.forEach((obj) => {
    
78. 
    
79. obj.update(); // 通知和该数据相关的所有订阅器
    
80. 
    
81. });
    
82. 
    
83. }
    
84. 
    
85. }
    
86. 
    
87. });
    
88. 
    
89. }
    
90. 
    
91. }
    
92. 
    
93. compile(el) { // 节点DOM解析器 用来获取和解析每一个节点及其指令 根据初始化的模板数据来创建订阅器watcher
    
94. 
    
95. let nodes = el.children;
    
96. 
    
97. for (let i = 0; i < nodes.length; i++) { // 迭代同级所有节点
    
98. 
    
99. let node = nodes[i];
    
100. 
     
101. if (node.children.length > 0) {
     
102. 
     
103. this.compile(node); // 递归所有子节点
     
104. 
     
105. }
     
106. 
     
107. if (node.hasAttribute('yf-on:click')) { // 节点中如存在该指令则执行以下操作
     
108. 
     
109. let eventAttrVal = node.getAttribute('yf-on:click');
     
110. 
     
111. node.addEventListener('click', this.$methods[eventAttrVal].bind(this.$data)); // 绑定获取到的指令对应的数据所触发的方法
     
112. 
     
113. }
     
114. 
     
115. if (node.hasAttribute('yf-if')) {
     
116. 
     
117. let ifAttrVal = node.getAttribute('yf-if');
     
118. 
     
119. this.oWatcherObj[ifAttrVal].push(new Watcher(this, node, "", ifAttrVal)); // 给该指令对应的数据创建订阅器放在该数据对应的订阅器数组里
     
120. 
     
121. }
     
122. 
     
123. if (node.hasAttribute('yf-model')) {
     
124. 
     
125. let modelAttrVal = node.getAttribute('yf-model');
     
126. 
     
127. node.addEventListener('input', ((i) => { // 前方高能:此处有闭包请绕行!!! i的问题
     
128. 
     
129. this.oWatcherObj[modelAttrVal].push(new Watcher(this, node, "value", modelAttrVal));
     
130. 
     
131. return () => {
     
132. 
     
133. this.$data[modelAttrVal] = nodes[i].value; // 将该指令所在节点的值扔给该指令的数据
     
134. 
     
135. }
     
136. 
     
137. })(i));
     
138. 
     
139. }
     
140. 
     
141. if (node.hasAttribute('yf-text')) {
     
142. 
     
143. let textAttrVal = node.getAttribute('yf-text');
     
144. 
     
145. this.oWatcherObj[textAttrVal].push(new Watcher(this, node, "innerText", textAttrVal));
     
146. 
     
147. }
     
148. 
     
149. }
     
150. 
     
151. }
     
152. 
     
153. }
     
154. 
     
155. 订阅器构造：
     
156. 
     
157. class Watcher { // 订阅器构造 用来接收属性值的相关数据的变化通知 从而更新视图
     
158. 
     
159. constructor(...arg) {
     
160. 
     
161. this.vm = arg[0];
     
162. 
     
163. this.el = arg[1];
     
164. 
     
165. this.attr = arg[2];
     
166. 
     
167. this.val = arg[3];
     
168. 
     
169. this.update(); // 初始化订阅器时更新一下视图
     
170. 
     
171. }
     
172. 
     
173. update() { // 将收到的新的数据更新在视图中从而实现真正的VM
     
174. 
     
175. if (this.vm.$data[this.val] === true) {
     
176. 
     
177. this.el.style.display = 'block';
     
178. 
     
179. } else if (this.vm.$data[this.val] === false) {
     
180. 
     
181. this.el.style.display = 'none';
     
182. 
     
183. } else {
     
184. 
     
185. this.el[this.attr] = this.vm.$data[this.val];
     
186. 
     
187. }
     
188. 
     
189. }
     
190. 
     
191. }
     
192. 
     
193. Shortcuts

复制代码

• 戳我运行代码
• Edit on GitHub
• Try in JSFiddle
  

希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

更多web前端进阶内容以及css、架构师干货，尽在WEB明教光明顶

好多人对它的理解还是只是知道了大概原理，但是对具体的Vue双向绑定的实现很模糊，因此就出了这篇文章，供大家参考希望可以得到收获，以下是主要代码逻辑，先陈述一下这一过程都需要什么：

需要有一个接收Vue实例配置项的构造函数SimpleVue，给他加两个原型方法分别是observe()和compile()，再构造出一个订阅器watcher，给他加一个更新视图方法

• observe()：用来劫持并监听数据变化的数据监听器，有变化就会通知下文中的订阅器watcher
• compile()：节点DOM解析器，用来获取和解析每一个节点及其指令，根据初始化的模板数据来创建订阅器watcher
• watcher()：订阅器watcher，用来接收属性值的相关数据的变化通知，调用自身原型方法update从而更新视图
  

由于Vue就是一个MVVM的框架理念，所以就要通过Object.defineProperty()方法来劫持并监听所有属性值相关的数据，看看它是否变化，如有变化则通知订阅器watcher看是否需要视图更新，这一过程就是我们的数据监听器observe的工作任务，由于数据和订阅器是一对多的关系，所以通知订阅器的时候需要把数据对应的订阅器的集合都放在一个oWatcherObj对象中，接下来需要一个节点DOM解析器compile，主要用来迭代递归获取和解析每一个节点及其指令，根据初始化的模板数据来创建订阅器watcher，实例化watcher就会接到数据变化的通知，进而实现VM更新视图

1. template：
   
2. 
   
3. <div id="simpleVue">
   
4. 
   
5. <button yf-on:click="copy">戳我</button>
   
6. 
   
7. <div>
   
8. 
   
9. <textarea yf-model="name"></textarea>
   
10. 
    
11. <div yf-text="name"></div>
    
12. 
    
13. </div>
    
14. 
    
15. <hr>
    
16. 
    
17. <button yf-on:click="show">显示/隐藏</button>
    
18. 
    
19. <div yf-if="isShow">
    
20. 
    
21. <input type="text" yf-model="webSite">
    
22. 
    
23. <div yf-text="webSite"></div>
    
24. 
    
25. </div>
    
26. 
    
27. </div>
    
28. 
    
29. SimpleVue构造：
    
30. 
    
31. class SimpleVue { // 简化版Vue实例的构造 用来接收实例的配置项
    
32. 
    
33. constructor(options) {
    
34. 
    
35. this.$el = document.querySelector(options.el);
    
36. 
    
37. this.$data = options.data;
    
38. 
    
39. this.$methods = options.methods;
    
40. 
    
41. this.oWatcherObj = {}; // 所有属性值相关的数据对应的订阅器的集合都放在该对象中
    
42. 
    
43. this.observe(); // 调用数据监听器对属性值相关的数据进行劫持并监听
    
44. 
    
45. this.compile(this.$el); // 对该DOM节点进行解析
    
46. 
    
47. }
    
48. 
    
49. observe() { // 数据监听器 用来劫持并监听属性值相关数据的变化 如有变化则通知订阅器watcher
    
50. 
    
51. for (let key in this.$data) {
    
52. 
    
53. let value = this.$data[key];
    
54. 
    
55. this.oWatcherObj[key] = []; // 初始化该数据的订阅器 数据和订阅器的关系是一对多
    
56. 
    
57. let oWatcherObj = this.oWatcherObj[key];
    
58. 
    
59. Object.defineProperty(this.$data, key, { // 关键方法 可以修改对象身上的默认属性值的ES5方法 下面用到的是ES中两大属性中的访问器属性,有以下四种描述符对象
    
60. 
    
61. configurable: false, // 该状态下的属性描述符不能被修改和删除
    
62. 
    
63. enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
    
64. 
    
65. get() { // 属性值相关的数据读取函数
    
66. 
    
67. return value;
    
68. 
    
69. },
    
70. 
    
71. set(newVal) { // 属性值相关的数据写入函数
    
72. 
    
73. if (newVal !== value) {
    
74. 
    
75. value = newVal;
    
76. 
    
77. oWatcherObj.forEach((obj) => {
    
78. 
    
79. obj.update(); // 通知和该数据相关的所有订阅器
    
80. 
    
81. });
    
82. 
    
83. }
    
84. 
    
85. }
    
86. 
    
87. });
    
88. 
    
89. }
    
90. 
    
91. }
    
92. 
    
93. compile(el) { // 节点DOM解析器 用来获取和解析每一个节点及其指令 根据初始化的模板数据来创建订阅器watcher
    
94. 
    
95. let nodes = el.children;
    
96. 
    
97. for (let i = 0; i < nodes.length; i++) { // 迭代同级所有节点
    
98. 
    
99. let node = nodes[i];
    
100. 
     
101. if (node.children.length > 0) {
     
102. 
     
103. this.compile(node); // 递归所有子节点
     
104. 
     
105. }
     
106. 
     
107. if (node.hasAttribute('yf-on:click')) { // 节点中如存在该指令则执行以下操作
     
108. 
     
109. let eventAttrVal = node.getAttribute('yf-on:click');
     
110. 
     
111. node.addEventListener('click', this.$methods[eventAttrVal].bind(this.$data)); // 绑定获取到的指令对应的数据所触发的方法
     
112. 
     
113. }
     
114. 
     
115. if (node.hasAttribute('yf-if')) {
     
116. 
     
117. let ifAttrVal = node.getAttribute('yf-if');
     
118. 
     
119. this.oWatcherObj[ifAttrVal].push(new Watcher(this, node, "", ifAttrVal)); // 给该指令对应的数据创建订阅器放在该数据对应的订阅器数组里
     
120. 
     
121. }
     
122. 
     
123. if (node.hasAttribute('yf-model')) {
     
124. 
     
125. let modelAttrVal = node.getAttribute('yf-model');
     
126. 
     
127. node.addEventListener('input', ((i) => { // 前方高能:此处有闭包请绕行!!! i的问题
     
128. 
     
129. this.oWatcherObj[modelAttrVal].push(new Watcher(this, node, "value", modelAttrVal));
     
130. 
     
131. return () => {
     
132. 
     
133. this.$data[modelAttrVal] = nodes[i].value; // 将该指令所在节点的值扔给该指令的数据
     
134. 
     
135. }
     
136. 
     
137. })(i));
     
138. 
     
139. }
     
140. 
     
141. if (node.hasAttribute('yf-text')) {
     
142. 
     
143. let textAttrVal = node.getAttribute('yf-text');
     
144. 
     
145. this.oWatcherObj[textAttrVal].push(new Watcher(this, node, "innerText", textAttrVal));
     
146. 
     
147. }
     
148. 
     
149. }
     
150. 
     
151. }
     
152. 
     
153. }
     
154. 
     
155. 订阅器构造：
     
156. 
     
157. class Watcher { // 订阅器构造 用来接收属性值的相关数据的变化通知 从而更新视图
     
158. 
     
159. constructor(...arg) {
     
160. 
     
161. this.vm = arg[0];
     
162. 
     
163. this.el = arg[1];
     
164. 
     
165. this.attr = arg[2];
     
166. 
     
167. this.val = arg[3];
     
168. 
     
169. this.update(); // 初始化订阅器时更新一下视图
     
170. 
     
171. }
     
172. 
     
173. update() { // 将收到的新的数据更新在视图中从而实现真正的VM
     
174. 
     
175. if (this.vm.$data[this.val] === true) {
     
176. 
     
177. this.el.style.display = 'block';
     
178. 
     
179. } else if (this.vm.$data[this.val] === false) {
     
180. 
     
181. this.el.style.display = 'none';
     
182. 
     
183. } else {
     
184. 
     
185. this.el[this.attr] = this.vm.$data[this.val];
     
186. 
     
187. }
     
188. 
     
189. }
     
190. 
     
191. }
     
192. 
     
193. Shortcuts

复制代码

• 戳我运行代码
• Edit on GitHub
• Try in JSFiddle
  

希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

更多web前端进阶内容以及css、架构师干货，尽在WEB明教光明顶