前言

什么是数据双向绑定

  vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突,我们可以这么解决

为什么要实现数据的双向绑定

   在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。

   即两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。

   

一、访问器属性

  Object.defineProperty()函数可以定义对象的属性相关描述符, 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用,下面,我们看看这个函数的基本使用方式。

  

  1. var obj = {
  2. foo: 'foo'
  3. }
  4.  
  5. Object.defineProperty(obj, 'foo', {
  6. get: function () {
  7. console.log('将要读取obj.foo属性');
  8. },
  9. set: function (newVal) {
  10. console.log('当前值为', newVal);
  11. }
  12. });
  13.  
  14. obj.foo; // 将要读取obj.foo属性
  15. obj.foo = 'name'; // 当前值为 name

  可以看到,get即为我们访问属性时调用,set为我们设置属性值时调用。

  

二、简单的数据双向绑定实现方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>forvue</title>
  6. </head>
  7. <body>
  8. <input type="text" id="textInput">
  9. 输入:<span id="textSpan"></span>
  10. <script>
  11. var obj = {},
  12. textInput = document.querySelector('#textInput'),
  13. textSpan = document.querySelector('#textSpan');
  14.  
  15. Object.defineProperty(obj, 'foo', {
  16. set: function (newValue) {
  17. textInput.value = newValue;
  18. textSpan.innerHTML = newValue;
  19. }
  20. });
  21.  
  22. textInput.addEventListener('keyup', function (e) {
  23. obj.foo = e.target.value;
  24. });
  25.  
  26. </script>
  27. </body>
  28. </html>

最终效果图:

可以看到,实现一个简单的数据双向绑定还是不难的: 使用Object.defineProperty()来定义属性的set函数,属性被赋值的时候,修改Input的value值以及span中的innerHTML;然后监听input的keyup事件,修改对象的属性值,即可实现这样的一个简单的数据双向绑定。

三、 实现任务的思路

  上面我们只是实现了一个最简单的数据双向绑定,而我们真正希望实现的时下面这种方式:

  1. <div id="app">
  2. <input type="text" v-model="text">
  3. {{ text }}
  4. </div>
  5.  
  6. <script>
  7. var vm = new Vue({
  8. el: '#app',
  9. data: {
  10. text: 'hello world'
  11. }
  12. });
  13. </script>

  即和vue一样的方式来实现数据的双向绑定。那么,我们可以把整个实现过程分为下面几步: 

  • 输入框以及文本节点与 data 中的数据绑定
  • 输入框内容变化时,data 中的数据同步变化。即 view => model 的变化
  • data 中的数据变化时,文本节点的内容同步变化。即 model => view 的变化

  

四、DocumentFragment

  如果希望实现任务一,我们还需要使用到 DocumentFragment 文档片段,可以把它看做一个容器,如下所示:

  1. <div id="app">
  2.  
  3. </div>
  4. <script>
  5. var flag = document.createDocumentFragment(),
  6. span = document.createElement('span'),
  7. textNode = document.createTextNode('hello world');
  8. span.appendChild(textNode);
  9. flag.appendChild(span);
  10. document.querySelector('#app').appendChild(flag)
  11. </script>

  这样,我们就可以得到下面的DOM树:

  使用文档片段的好处在于:在文档片段上进行操作DOM,而不会影响到真实的DOM,操作完成之后,我们就可以添加到真实DOM上,这样的效率比直接在正式DOM上修改要高很多 。

  vue进行编译时,就是将挂载目标的所有子节点劫持到DocumentFragment中,经过一番处理之后,再将DocumentFragment整体返回插入挂载目标

   

  如下所示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>forvue</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <input type="text" id="a">
  10. <span id="b"></span>
  11. </div>
  12.  
  13. <script>
  14. var dom = nodeToFragment(document.getElementById('app'));
  15. console.log(dom);
  16.  
  17. function nodeToFragment(node) {
  18. var flag = document.createDocumentFragment();
  19. var child;
  20. while (child = node.firstChild) {
  21. flag.appendChild(child);
  22. }
  23. return flag;
  24. }
  25.  
  26. document.getElementById('app').appendChild(dom);
  27. </script>
  28.  
  29. </body>
  30. </html>

即首先获取到div,然后通过documentFragment劫持,接着再把这个文档片段添加到div上去。

五、初始化数据绑定

  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>forvue</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <input type="text" v-model="text">
  10. {{ text }}
  11. </div>
  12.  
  13. <script>
  14. function compile(node, vm) {
  15. var reg = /\{\{(.*)\}\}/;
  16.  
  17. // 节点类型为元素
  18. if (node.nodeType === ) {
  19. var attr = node.attributes;
  20. // 解析属性
  21. for (var i = ; i < attr.length; i++) {
  22. if (attr[i].nodeName == 'v-model') {
  23. var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  24. node.value = vm.data[name]; // 将data的值赋值给该node
  25. node.removeAttribute('v-model');
  26. }
  27. }
  28. }
  29.  
  30. // 节点类型为text
  31. if (node.nodeType === ) {
  32. if (reg.test(node.nodeValue)) {
  33. var name = RegExp.$; // 获取匹配到的字符串
  34. name = name.trim();
  35. node.nodeValue = vm.data[name]; // 将data的值赋值给该node
  36. }
  37. }
  38. }
  39.  
  40. function nodeToFragment(node, vm) {
  41. var flag = document.createDocumentFragment();
  42. var child;
  43.  
  44. while (child = node.firstChild) {
  45. compile(child, vm);
  46. flag.appendChild(child); // 将子节点劫持到文档片段中
  47. }
  48.  
  49. return flag;
  50. }
  51.  
  52. function Vue(options) {
  53. this.data = options.data;
  54. var id = options.el;
  55. var dom = nodeToFragment(document.getElementById(id), this);
  56. // 编译完成后,将dom返回到app中。
  57. document.getElementById(id).appendChild(dom);
  58. }
  59.  
  60. var vm = new Vue({
  61. el: 'app',
  62. data: {
  63. text: 'hello world'
  64. }
  65. });
  66.  
  67. </script>
  68.  
  69. </body>
  70. </html>

以上的代码实现而立任务一,我们可以看到,hello world 已经呈现在了输入框和文本节点中了。

六、响应式的数据绑定

  我们再来看看任务二的实现思路: 当我们在输入框输入数据的时候,首先触发的时input事件(或者keyup、change事件),在相应的事件处理程序中,我们获取输入框的value并赋值给vm实例的text属性。 我们会利用defineProperty将data中的text设置为vm的访问器属性,因此给vm.text赋值,就会触发set方法。 在set方法中主要做两件事情,第一是更新属性的值,第二留在任务三种说。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>forvue</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <input type="text" v-model="text">
  10. {{ text }}
  11. </div>
  12.  
  13. <script>
  14. function compile(node, vm) {
  15. var reg = /\{\{(.*)\}\}/;
  16.  
  17. // 节点类型为元素
  18. if (node.nodeType === ) {
  19. var attr = node.attributes;
  20. // 解析属性
  21. for (var i = ; i < attr.length; i++) {
  22. if (attr[i].nodeName == 'v-model') {
  23. var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  24. node.addEventListener('input', function (e) {
  25. // 给相应的data属性赋值,进而触发属性的set方法
  26. vm[name] = e.target.value;
  27. })
  28.  
  29. node.value = vm[name]; // 将data的值赋值给该node
  30. node.removeAttribute('v-model');
  31. }
  32. }
  33. }
  34.  
  35. // 节点类型为text
  36. if (node.nodeType === ) {
  37. if (reg.test(node.nodeValue)) {
  38. var name = RegExp.$; // 获取匹配到的字符串
  39. name = name.trim();
  40. node.nodeValue = vm[name]; // 将data的值赋值给该node
  41. }
  42. }
  43. }
  44.  
  45. function nodeToFragment(node, vm) {
  46. var flag = document.createDocumentFragment();
  47. var child;
  48.  
  49. while (child = node.firstChild) {
  50. compile(child, vm);
  51. flag.appendChild(child); // 将子节点劫持到文档片段中
  52. }
  53.  
  54. return flag;
  55. }
  56.  
  57. function Vue(options) {
  58. this.data = options.data;
  59. var data = this.data;
  60.  
  61. observe(data, this);
  62.  
  63. var id = options.el;
  64. var dom = nodeToFragment(document.getElementById(id), this);
  65. // 编译完成后,将dom返回到app中。
  66. document.getElementById(id).appendChild(dom);
  67. }
  68.  
  69. var vm = new Vue({
  70. el: 'app',
  71. data: {
  72. text: 'hello world'
  73. }
  74. });
  75.  
  76. function defineReactive(obj, key, val) {
  77. // 响应式的数据绑定
  78. Object.defineProperty(obj, key, {
  79. get: function () {
  80. return val;
  81. },
  82. set: function (newVal) {
  83. if (newVal === val) {
  84. return;
  85. } else {
  86. val = newVal;
  87. console.log(val); // 方便看效果
  88. }
  89. }
  90. });
  91. }
  92.  
  93. function observe (obj, vm) {
  94. Object.keys(obj).forEach(function (key) {
  95. defineReactive(vm, key, obj[key]);
  96. });
  97. }
  98.  
  99. </script>
  100.  
  101. </body>
  102. </html>

以上,任务二也就完成了,text属性值会和输入框的内容同步变化。

七、 订阅/发布模式(subscribe & publish)

  text属性变化了,set方法触发了,但是文本节点的内容没有变化。 如何才能让同样绑定到text的文本节点也同步变化呢? 这里又有一个知识点: 订阅发布模式。

  订阅发布模式又称为观察者模式,定义了一种一对多的关系让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有的观察者对象。

  发布者发出通知 =>主题对象收到通知推送给订阅者 => 订阅者执行相应的操作。 

  1. // 一个发布者 publisher,功能就是负责发布消息 - publish
  2. var pub = {
  3. publish: function () {
  4. dep.notify();
  5. }
  6. }
  7.  
  8. // 多个订阅者 subscribers, 在发布者发布消息之后执行函数
  9. var sub1 = {
  10. update: function () {
  11. console.log();
  12. }
  13. }
  14. var sub2 = {
  15. update: function () {
  16. console.log();
  17. }
  18. }
  19. var sub3 = {
  20. update: function () {
  21. console.log();
  22. }
  23. }
  24.  
  25. // 一个主题对象
  26. function Dep() {
  27. this.subs = [sub1, sub2, sub3];
  28. }
  29. Dep.prototype.notify = function () {
  30. this.subs.forEach(function (sub) {
  31. sub.update();
  32. });
  33. }
  34.  
  35. // 发布者发布消息, 主题对象执行notify方法,进而触发订阅者执行Update方法
  36. var dep = new Dep();
  37. pub.publish();

不难看出,这里的思路还是很简单的: 发布者负责发布消息、 订阅者负责接收接收消息,而最重要的是主题对象,他需要记录所有的订阅这特消息的人,然后负责吧发布的消息通知给哪些订阅了消息的人。

所以,当set方法触发后做的第二件事情就是作为发布者发出通知: “我是属性text,我变了”。 文本节点作为订阅者,在接收到消息之后执行相应的更新动作。

八、 双向绑定的实现

  回顾一下,每当new一个Vue,主要做了两件事情:第一是监听数据:observe(data),第二是编译HTML:nodeToFragment(id)

  在监听数据的过程中,会为data中的每一个属性生成一个主题对象dep。

  在编译HTML的过程中,会为每一个与数据绑定相关的节点生成一个订阅者 watcher,watcher会将自己添加到相应属性的dep中。

  我们已经实现了: 修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的set方法。

  接下来我们要实现的是: 发出通知 dep.notify() => 触发订阅者update方法 => 更新视图。

  这里的关键逻辑是: 如何将watcher添加到关联属性的dep中。

  1. function compile(node, vm) {
  2. var reg = /\{\{(.*)\}\}/;
  3.  
  4. // 节点类型为元素
  5. if (node.nodeType === ) {
  6. var attr = node.attributes;
  7. // 解析属性
  8. for (var i = ; i < attr.length; i++) {
  9. if (attr[i].nodeName == 'v-model') {
  10. var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  11. node.addEventListener('input', function (e) {
  12. // 给相应的data属性赋值,进而触发属性的set方法
  13. vm[name] = e.target.value;
  14. })
  15.  
  16. node.value = vm[name]; // 将data的值赋值给该node
  17. node.removeAttribute('v-model');
  18. }
  19. }
  20. }
  21.  
  22. // 节点类型为text
  23. if (node.nodeType === ) {
  24. if (reg.test(node.nodeValue)) {
  25. var name = RegExp.$; // 获取匹配到的字符串
  26. name = name.trim();
  27. // node.nodeValue = vm[name]; // 将data的值赋值给该node
  28.  
  29. new Watcher(vm, node, name);
  30. }
  31. }
  32. }

在编译HTML的过程中,为每个和data关联的节点生成一个Watcher。那么Watcher函数中发生了什么呢?

  1. function Watcher(vm, node, name) {
  2. Dep.target = this;
  3. this.name = name;
  4. this.node = node;
  5. this.vm = vm;
  6. this.update();
  7. Dep.target = null;
  8. }
  9.  
  10. Watcher.prototype = {
  11. update: function () {
  12. this.get();
  13. this.node.nodeValue = this.value;
  14. },
  15.  
  16. // 获取data中的属性值
  17. get: function () {
  18. this.value = this.vm[this.name]; // 触发相应属性的get
  19. }
  20. }

首先,将自己赋值给了一个全局变量 Dep.target;

其次,执行了update方法,进而执行了 get 方法,get方法读取了vm的访问器属性, 从而触发了访问器属性的get方法,get方法将该watcher添加到对应访问器属性的dep中;

再次,获取顺序性的值, 然后更新视图。

最后将Dep.target设置为空。 因为他是全局变量,也是watcher和dep关联的唯一桥梁,任何时候,都必须保证Dep.target只有一个值。

最终如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>forvue</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <input type="text" v-model="text"> <br>
  10. {{ text }} <br>
  11. {{ text }}
  12. </div>
  13.  
  14. <script>
  15. function observe(obj, vm) {
  16. Object.keys(obj).forEach(function (key) {
  17. defineReactive(vm, key, obj[key]);
  18. });
  19. }
  20.  
  21. function defineReactive(obj, key, val) {
  22.  
  23. var dep = new Dep();
  24.  
  25. // 响应式的数据绑定
  26. Object.defineProperty(obj, key, {
  27. get: function () {
  28. // 添加订阅者watcher到主题对象Dep
  29. if (Dep.target) {
  30. dep.addSub(Dep.target);
  31. }
  32. return val;
  33. },
  34. set: function (newVal) {
  35. if (newVal === val) {
  36. return;
  37. } else {
  38. val = newVal;
  39. // 作为发布者发出通知
  40. dep.notify()
  41. }
  42. }
  43. });
  44. }
  45.  
  46. function nodeToFragment(node, vm) {
  47. var flag = document.createDocumentFragment();
  48. var child;
  49.  
  50. while (child = node.firstChild) {
  51. compile(child, vm);
  52. flag.appendChild(child); // 将子节点劫持到文档片段中
  53. }
  54.  
  55. return flag;
  56. }
  57.  
  58. function compile(node, vm) {
  59. var reg = /\{\{(.*)\}\}/;
  60.  
  61. // 节点类型为元素
  62. if (node.nodeType === ) {
  63. var attr = node.attributes;
  64. // 解析属性
  65. for (var i = ; i < attr.length; i++) {
  66. if (attr[i].nodeName == 'v-model') {
  67. var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  68. node.addEventListener('input', function (e) {
  69. // 给相应的data属性赋值,进而触发属性的set方法
  70. vm[name] = e.target.value;
  71. })
  72. node.value = vm[name]; // 将data的值赋值给该node
  73. node.removeAttribute('v-model');
  74. }
  75. }
  76. }
  77.  
  78. // 节点类型为text
  79. if (node.nodeType === ) {
  80. if (reg.test(node.nodeValue)) {
  81. var name = RegExp.$; // 获取匹配到的字符串
  82. name = name.trim();
  83. // node.nodeValue = vm[name]; // 将data的值赋值给该node
  84.  
  85. new Watcher(vm, node, name);
  86. }
  87. }
  88. }
  89.  
  90. function Watcher(vm, node, name) {
  91. Dep.target = this;
  92. this.name = name;
  93. this.node = node;
  94. this.vm = vm;
  95. this.update();
  96. Dep.target = null;
  97. }
  98.  
  99. Watcher.prototype = {
  100. update: function () {
  101. this.get();
  102. this.node.nodeValue = this.value;
  103. },
  104.  
  105. // 获取data中的属性值
  106. get: function () {
  107. this.value = this.vm[this.name]; // 触发相应属性的get
  108. }
  109. }
  110.  
  111. function Dep () {
  112. this.subs = [];
  113. }
  114.  
  115. Dep.prototype = {
  116. addSub: function (sub) {
  117. this.subs.push(sub);
  118. },
  119.  
  120. notify: function () {
  121. this.subs.forEach(function (sub) {
  122. sub.update();
  123. });
  124. }
  125. }
  126.  
  127. function Vue(options) {
  128. this.data = options.data;
  129. var data = this.data;
  130.  
  131. observe(data, this);
  132.  
  133. var id = options.el;
  134. var dom = nodeToFragment(document.getElementById(id), this);
  135. // 编译完成后,将dom返回到app中。
  136. document.getElementById(id).appendChild(dom);
  137. }
  138.  
  139. var vm = new Vue({
  140. el: 'app',
  141. data: {
  142. text: 'hello world'
  143. }
  144. });
  145.  
  146. </script>
  147. </body>
  148. </html>

  

参考文章:

vue中的双向数据绑定详解的更多相关文章

  1. Vue中的双向数据绑定简单介绍

    1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...

  2. js中或者vue中 Object.assign()用法详解

    Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object. ...

  3. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  4. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  5. npm安装vue详细教程(图片详解)

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  6. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  7. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  8. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  9. 011-Scala中的apply实战详解

    011-Scala中的apply实战详解 object中的apply方法 class中的apply方法 使用方法 apply方法可以应用在类或者Object对象中 class类 必须要创建实例化的类对 ...

随机推荐

  1. JS+MySQL获取 京东 省市区 地区

    采集了一下JD的省市区地区 (非常简单,只是做个记录) 1.建表:account_area   2.进入页面: https://reg.jd.com/reg/company 在浏览器(Firefox) ...

  2. (深搜)Oil Deposits -- hdu -- 1241

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1241 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  3. HDU1233 还是畅通工程 2017-04-12 19:49 64人阅读 评论(0) 收藏

    还是畅通工程 Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  4. HDU2544 最短路 2017-04-12 18:51 31人阅读 评论(0) 收藏

    最短路 Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  5. 转:Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    public IEnumerable<Statistic> GetStatistics(IEnumerable<Guid> itemIds) { var ctx = new D ...

  6. TSQL--集合处理

    UNION ALL 返回两个结果集中所有的行,返回结果集中会存在重复行 UNION 返回两个结果集中去重的行,返回结果集中无重复行 INTERSECT 返回两个结果集都有的行,返回结果集中无重复行 E ...

  7. (一)ElasticSearch-入门

    目录:一.前言二.安装三.索引四.搜索五.聚合六.分布式的特性 一.前言Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被 ...

  8. wpf(怎么跨线程访问wpf控件)

    在编写代码时,我们经常会碰到一些子线程中处理完的信息,需要通知另一个线程(我这边处理完了,该你了). 但是当我们通知WPF的UI线程时需要用到Dispatcher. 首先我们需要想好在UI控件上需要显 ...

  9. double? int?

    C# 值类型加上?表示可空类型(Nullable 结构),就是一种特殊的值类型,它的值可以为null 例: int? float? stirng? double?

  10. WPF文字间距

    代码: <ItemsControl ItemsSource="{Binding Info}" FontFamily="微软雅黑" FontSize=&qu ...