vue中的双向数据绑定原理与常见操作技巧详解


Posted in Javascript onMarch 16, 2020

本文实例讲述了vue中的双向数据绑定原理与常见操作技巧。分享给大家供大家参考,具体如下:

什么是双向数据绑定?

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

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

在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪,局部性数据流使用双向,简单易操作。

1.访问器属性

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

var obj = {
   foo: 'foo'
  }

  Object.defineProperty(obj, 'foo', {
   get: function () {
    console.log('将要读取obj.foo属性');
   }, 
   set: function (newVal) {
    console.log('当前值为', newVal);
   }
  });

  obj.foo; // 将要读取obj.foo属性
  obj.foo = 'name'; // 当前值为 name

上面代码中,get即为我们访问属性时调用,set为我们设置属性值时调用。

2.简单的数据双向绑定实现方法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>forvue</title>
</head>
<body>
 <input type="text" id="textInput">
 输入:<span id="textSpan"></span>
 <script>
  var obj = {},
    textInput = document.querySelector('#textInput'),
    textSpan = document.querySelector('#textSpan');

  Object.defineProperty(obj, 'foo', {
   set: function (newValue) {
    textInput.value = newValue;
    textSpan.innerHTML = newValue;
   }
  });

  textInput.addEventListener('keyup', function (e) {
    obj.foo = e.target.value;
  });

 </script>
</body>
</html>

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

3. 实现任务的思路

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

<div id="app">
    <input type="text" v-model="text">
    {{ text }}
  </div> 

  <script>
    var vm = new Vue({
      el: '#app', 
      data: {
        text: 'hello world'
      }
    });
  </script>

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

输入框以及文本节点与data中的数据绑定

输入框内容变化时,data中的数据同步变化。即view => model的变化。

data中的数据变化 时,文本节点的内容同步变化。即model => view的变化。

4.DocumentFragment

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

<div id="app">
    
  </div>
  <script>
    var flag = document.createDocumentFragment(),
      span = document.createElement('span'),
      textNode = document.createTextNode('hello world');
    span.appendChild(textNode);
    flag.appendChild(span);
    document.querySelector('#app').appendChild(flag)
  </script>

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

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

5.初始化数据绑定

function compile(node, vm) {
 var reg = /\{\{(.*)\}\}/
 // 如果节点是元素
 if (node.nodeType === 1) {
  var attr = node.attributes
  for (var i = 0; i < attr.length; i++) {
   if (attr[i].nodeName === 'v-model') {
     var name = attr[i].nodeValue 
    node.value = vm.data[name]
    node.removeAttribute('v-model')
   }
   
  }
 }
 
 if (node.nodeType === 3) {
  if (reg.test(node.nodeValue)) {
   var name = RegExp.$1
   name = name.trim()
   node.nodeValue = vm.data[name]
  }
 }
}

function nodeToFragment(node, vm) {
 var flag = document.createDocumentFragment()
 var child 
 while(child = node.firstChild) {
  compile(child, vm)
  flag.appendChild(child)
 }
 return flag
}

function Vue(options) {
 this.data = options.data 
 var el = options.el
 var dom = nodeToFragment(document.querySelector(el), this)
 
 document.querySelector(el).appendChild(dom)
}

var vm = new Vue({
 el: '#app',
 data: {
  text: 'hello'
 }
})

6.响应式的数据绑定

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>forvue</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text">
    {{ text }}
  </div>
    
  <script>
    function compile(node, vm) {
      var reg = /\{\{(.*)\}\}/;

      // 节点类型为元素
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析属性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 获取v-model绑定的属性名
            node.addEventListener('input', function (e) {
              // 给相应的data属性赋值,进而触发属性的set方法
              vm[name] = e.target.value;
            })


            node.value = vm[name]; // 将data的值赋值给该node
            node.removeAttribute('v-model');
          }
        }
      }

      // 节点类型为text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          node.nodeValue = vm[name]; // 将data的值赋值给该node
        }
      }
    }

    function nodeToFragment(node, vm) {
      var flag = document.createDocumentFragment();
      var child;

      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }
      
      return flag;
    }

    function Vue(options) {
      this.data = options.data;
      var data = this.data;

      observe(data, this);

      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 编译完成后,将dom返回到app中。
      document.getElementById(id).appendChild(dom);
    }

    var vm = new Vue({
      el: 'app',
      data: {
        text: 'hello world'
      }
    });

    function defineReactive(obj, key, val) {
      // 响应式的数据绑定
      Object.defineProperty(obj, key, {
        get: function () {
          return val;
        },
        set: function (newVal) {
          if (newVal === val) {
            return; 
          } else {
            val = newVal;
            console.log(val); // 方便看效果
          }
        }
      });
    }

    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      });
    }
  </script>

</body>
</html>

7. 订阅/发布模式(subscribe & publish)

text属性变化了,set方法触发了,但是文本节点的内容没有变化。如何才能让同样绑定到text的文本节点也同步变化呢?这里有一个知识点:订阅发布模式,订阅发布模式又称为观察者模式,定义一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有的观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作

// 一个发布者 publisher,功能就是负责发布消息 - publish
    var pub = {
      publish: function () {
        dep.notify();
      }
    }

    // 多个订阅者 subscribers, 在发布者发布消息之后执行函数
    var sub1 = { 
      update: function () {
        console.log(1);
      }
    }
    var sub2 = { 
      update: function () {
        console.log(2);
      }
    }
    var sub3 = { 
      update: function () {
        console.log(3);
      }
    }

    // 一个主题对象
    function Dep() {
      this.subs = [sub1, sub2, sub3];
    }
    Dep.prototype.notify = function () {
      this.subs.forEach(function (sub) {
        sub.update();
      });
    }

    // 发布者发布消息, 主题对象执行notify方法,进而触发订阅者执行Update方法
    var dep = new Dep();
    pub.publish();

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

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

8.双向绑定的实现

回顾一下,每当new一个vue,主要做了两件事情 ,第一监听数据:observe(data),第二是编译HTML, nodeToFragment(id)
在监听数据的过程中,会为data中的每一个属性生成一个主题对象dep。
在编译HTML的过程中,会为每一个数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。
我们已经实现了:修改输入框内容 => 在事件回调函数中修改属性值 => 触 发属性的set方法。
接下来我们要实现的是:发出通知dep.notify() => 触发订阅者update方法 => 更新视图。
这里的关键逻辑是:如何将watch添加到关联属性的dep中。

function observe(obj, vm) {
 Object.keys(obj).forEach(function(key) {
  defineReactive(vm, key, obj[key])
 })
}

function defineReactive(obj, key, val) {
 var dep = new Dep()
 Object.defineProperty(obj, key, {
  get: function() {
   if (Dep.target) {
    // 添加订阅者watcher到主题对象Dep
    dep.addsub(Dep.target)
   }
   return val
  },
  set: function(newVal) {
   if (newVal === val) {
    return
   } else {
    val = newVal
    // 作为发布者发出通知
    dep.notify()
    
   }
   
  }
 })
}

function Dep () {
 this.subs = []
}

Dep.prototype = {
 addsub: function(sub) {
  this.subs.push(sub)
 },
 notify: function() {
  this.subs.forEach(function(sub) {
   sub.update()
  })
 }
}

function compile(node, vm) {
 var reg = /\{\{(.*)\}\}/
 if (node.nodeType === 1) {
  var attr = node.attributes
  for (var i = 0; i < attr.length; i++) {
   if (attr[i].nodeName === 'v-model') {
    var name = attr[i].nodeValue
    node.addEventListener('input', function(e) {
     vm[name] = e.target.value
    })
    node.value = vm[name]
    node.removeAttribute('v-model')
   }
  }
 }
 
 if (node.nodeType === 3) {
  if (reg.test(node.nodeValue)) {
   var name = RegExp.$1
   name = name.trim()
   // node.nodeValue = vm[name]
   new Watcher(vm, node, name)
  }
 }
}

function nodeToFragment(node, vm) {
 var flag = document.createDocumentFragment()
 var child 
 while (child = node.firstChild) {
  compile(child, vm)
  flag.appendChild(child)
 }
 return flag
}

function Watcher(vm, node, name){
 Dep.target = this 
 this.vm = vm 
 this.node = node 
 this.name = name 
 this.update()
 Dep.target = null
}

Watcher.prototype = {
 update: function() {
  this.get()
  this.node.nodeValue = this.value
 },
 get: function() {
  this.value = this.vm[this.name]
 }
}

function Vue(options) {
 this.data = options.data
 this.methods = options.methods
 var data = this.data 
 var el = options.el
 
 observe(data, this)
 
 var dom = nodeToFragment(document.querySelector(el), this)
 
 document.querySelector(el).appendChild(dom)
}

var vm = new Vue({
 el: '#app',
 data: {
  text: 123
 }
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
优化javascript的执行效率一些方法总结
Dec 25 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
深入理解Vue 的钩子函数
Sep 05 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
js+canvas实现纸牌游戏
Mar 16 #Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 #Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 #Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
如何用Python合并lmdb文件
2018/07/02 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
生态养殖创业计划书
2014/05/06 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
超市促销活动总结
2014/07/01 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
客服专员岗位职责
2015/02/10 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
MySQL分区表管理命令汇总
2022/03/21 MySQL
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server