首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue 双向数据绑定的实现学习之监听器的实现方法

Posted in Javascript onNovember 30, 2018

提到了vue实现的基本实现原理：Object.defineProperty() -数据劫持 和 发布订阅者模式（观察者），下面讲的就是数据劫持在代码中的具体实现。

1.先看如何调用vue 双向数据绑定的实现学习之监听器的实现方法

new一个对象，传入我们的参数，这个Myvue ，做了啥？

vue 双向数据绑定的实现学习之监听器的实现方法

上面看到了在实例化一个Myvue 对象的时候，会执行init方法， init 方法做了两个事，调用了observer 方法，和 实例化调用了 compile 方法。 到这里我们就明白了，实例化一个Myvue后，我们要做的就是监听数据变化和编译模板 。

上面Object.key() 方法，实例化时传入的data里面对应的变量缓存到 Myvue 对象的 $prop上，这样方便在后续处理数据。怎么个方便法呢！...

2.observer 的实现

observer ,模式里面的角色定位 他是一个发布者，也可以理解为是一个观察者

function observer (data) {
  if(!data || typeof data !== 'object') {
    return;
  }
  Object.keys(data).forEach(key => {
    // 对每个属性监听处理
    defineReactive(data, key, data[key]);
  })
}

defineReactive

function defineReactive (data,key,value) {
  // 每次访问/修改属性的时候 实例化一个调度中心Dep
  var dep = new Dep();
  Object.defineProperty(data,key,{
    get: function() {
      // 添加到watcher 的Dep 调度中心
      if (Dep.target) { // Dep.target 是个什么鬼？ 转到watcher.js 它是某个订阅者 watcher
        dep.addSub(Dep.target); //这个代码段的意思： 如果有订阅者(访问/修改属性的时候) 就将这个订阅者统一放进 Dep 调度中心中
      }
      // console.log(`${key}属性被访问了`)
      return value
    },
    set: function (newValue) {
      if (value != newValue) {
        // console.log(`${key}属性被重置了`)
        value = newValue
        dep.notify(); //我这里有做改动了，通知调度中心的notify方法
      }
    }
  })
  // 递归调用，observe 这个value
  observer(value)
}

Dep: 这里是所有订阅者的一个调度中心，它不是直接监听 发布者的信息，发布者将要发布的信息 发布到 一个中介、调度中心（Dep）,由这个Dep 来调度信息给哪个订阅者(Watcher)

// 统一管理watcher订阅者的Dep （调度中心） Dispatch center
function Dep () {
  // 所有的watcher 放进这里统一管理
  this.subs = []
}
Dep.target = null;
// 通知视图更新dom的 notify的方法
Dep.prototype.notify  = function () {
  // this.subs 是上面订阅器watcher 的集合
  this.subs.forEach(sub => {
    // sub 是某个Watcher 具体调用某个Watcher的update 方法
    sub.update()
  })
}
// 添加订阅者的方法
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub)
}

3.订阅器Watcher

// 具体的订阅器Watcher
// 传入一个vue 的实例， 监听的属性， 以及处理的回调函数
function Watcher (vm,prop,callback) {
  this.vm = vm;
  this.$prop = prop;
  this.value = this.get();
  this.callback = callback; // 具体watcher所具有的方法，不同的watcher 不同的回调函数，处理不同的业务逻辑
 }
// 添加watcher 获得属性的get 方法，当有属性访问/设置 的时候，就产生订阅者 将这个订阅者放进调度中心
Watcher.prototype.get = function () {
  Dep.target = this;
  // 获得属性值
  const value = this.vm.$data[this.$prop];
  return value
}
// 添加watcher的更新视图的方法
Watcher.prototype.update = function () {
  // 当属性值有变化的时候，执行方法，更新试图
  const value = this.vm.$data[this.$prop];
  const oldValue = this.value;
  // update 执行的时候，先获取 vm 中data实时更新的属性值，this.value 是vm data中之前的老值
  if (oldValue != value) {
    // console.log('人家通知了，我要改变了')
    // 把刚刚获取的更新值赋给之前vm data 中的值
    this.value = value 
    // 执行回调函数 具体怎么处理这个，看实际调用时候 callback 的处理 
    this.callback(this.value)
  }
}

4.模板编译

（为了直接看到页面数据变化的效果，在模板编译的核心数据处理上做了dom 操作，下一篇将讲模板编译的一些细节处理）

// dom模板编译 vm 就是我们最上面的Myvue 对象
function Compile (vm) {
  this.vm = vm;
  this.$el = vm.el;
  // this.data = vm.data;
  this.fragment = null; // 用作后面模板引擎 创建文档片段
  this.init()
}
Compile.prototype = {
  // init 方法简单处理，直接做dom 操作，后面会用详细的模板引擎的学习
  init: function () {
    let value = this.vm.$data.name // 初始化获取到的值 放进dom节点中
    document.querySelector('.form-control').value = value;
    document.querySelector('.template').textContent = value
    // 通知订阅者更新dom
    new Watcher(this.vm,this.vm.$prop, (value) => {
      document.querySelector('.form-control').value = value;
      document.querySelector('.template').textContent = value
    })
    document.querySelector('.form-control').addEventListener('input',(e) => {
      let targetValue = e.target.value
      if(value !== targetValue) {
        this.vm.$data.name = e.target.value // 将修改的值 更新到 vm的data中
        document.querySelector('.form-control').value = targetValue; // 更新dom 节点
        document.querySelector('.template').textContent = targetValue
      }
    },false)
  }
}

这样就可以看到 在表单中，数据的双向绑定了。

vue 双向数据绑定的实现学习之监听器的实现方法

未完待续，错误之处，敬请指出,共同进步！

下一篇 vue 双向数据绑定的实现学习（三）- 模板编译

附：演示代码：

js:

function Myvue (options) {
  this.$options = options
  this.$el = document.querySelector(options.el);
  this.$data = options.data;
  Object.keys(this.$data).forEach(key => {
    this.$prop = key;
  })
  this.init()
}
Myvue.prototype.init = function () {
  // 监听数据变化
  observer(this.$data);
      // 获得值
      // let value = this.$data[this.$prop];
      // 不经过模板编译直接 通知订阅者更新dom
      // new Watcher(this,this.$prop,value => {
      //   console.log(`watcher ${this.$prop}的改动，要有动静了`)
      //   this.$el.textContent = value
      // }) 
  //通知模板编译来执行页面上模板变量替换
  new Compile(this)
}
function observer (data) {
  if(!data || typeof data !== 'object') {
    return;
  }
  Object.keys(data).forEach(key => {
    // 对每个属性监听处理
    defineReactive(data, key, data[key]);
  })
}
function defineReactive (data,key,value) {
  // 每次访问/修改属性的时候 实例化一个调度中心Dep
  var dep = new Dep();
  Object.defineProperty(data,key,{
    get: function() {
      // 添加到watcher 的Dep 调度中心
      if (Dep.target) { // Dep.target 是个什么鬼？ 转到watcher.js 它是某个订阅者 watcher
        dep.addSub(Dep.target); //这个代码段的意思： 如果有订阅者(访问/修改属性的时候) 就将这个订阅者统一放进 Dep 调度中心中
      }
      // console.log(`${key}属性被访问了`)
      return value
    },
    set: function (newValue) {
      if (value != newValue) {
        // console.log(`${key}属性被重置了`)
        value = newValue
        dep.notify(); //我这里有做改动了，通知调度中心的notify方法
      }
    }
  })
  // 递归调用，observe 这个value
  observer(value)
}
// 统一管理watcher订阅者的Dep （调度中心） Dispatch center
function Dep () {
  // 所有的watcher 放进这里统一管理
  this.subs = []
}
Dep.target = null;
// 通知视图更新dom的 notify的方法
Dep.prototype.notify  = function () {
  // this.subs 是上面订阅器watcher 的集合
  this.subs.forEach(sub => {
    // sub 是某个Watcher 具体调用某个Watcher的update 方法
    sub.update()
  })
}
// 添加订阅者的方法
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub)
}
// 具体的订阅器Watcher
// 传入一个vue 的示例， 监听的属性， 以及处理的回调函数
function Watcher (vm,prop,callback) {
  this.vm = vm;
  this.$prop = prop;
  this.value = this.get();
  this.callback = callback; // 具体watcher所具有的方法，不同的watcher 不同的回调函数，处理不同的业务逻辑
 }
// 添加watcher 获得属性的get 方法，当有属性访问/设置 的时候，就产生订阅者 将这个订阅者放进调度中心
Watcher.prototype.get = function () {
  Dep.target = this;
  // 获得属性值
  const value = this.vm.$data[this.$prop];
  return value
}
// 添加watcher的更新视图的方法
Watcher.prototype.update = function () {
  // 当属性值有变化的时候，执行方法，更新试图
  const value = this.vm.$data[this.$prop];
  const oldValue = this.value;
  // update 执行的时候，先获取 vm 中data实时更新的属性值，this.value 是vm data中之前的老值
  if (oldValue != value) {
    // console.log('人家通知了，我要改变了')
    // 把刚刚获取的更新值赋给之前vm data 中的值
    this.value = value 
    // 执行回调函数 具体怎么处理这个，看实际调用时候 callback 的处理 
    this.callback(this.value)
  }
}
// dom模板编译 vm 就是我们最上面的Myvue 对象
function Compile (vm) {
  this.vm = vm;
  this.$el = vm.el;
  // this.data = vm.data;
  this.fragment = null; // 用作后面模板引擎 创建文档片段
  this.init()
}
Compile.prototype = {
  // init 方法简单处理，直接做dom 操作，后面会用详细的模板引擎的学习
  init: function () {
    let value = this.vm.$data.name // 初始化获取到的值 放进dom节点中
    document.querySelector('.form-control').value = value;
    document.querySelector('.template').textContent = value
    // 通知订阅者更新dom
    new Watcher(this.vm,this.vm.$prop, (value) => {
      document.querySelector('.form-control').value = value;
      document.querySelector('.template').textContent = value
    })
    document.querySelector('.form-control').addEventListener('input',(e) => {
      let targetValue = e.target.value
      if(value !== targetValue) {
        this.vm.$data.name = e.target.value // 将修改的值 更新到 vm的data中
        document.querySelector('.form-control').value = targetValue; // 更新dom 节点
        document.querySelector('.template').textContent = targetValue
      }
    },false)
  }
}

html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue双向绑定原理及实现</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <style>
      #app {
        margin: 20px auto;
        width: 400px;
        padding: 50px;
        text-align: center;
        border: 2px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input class="form-control" v-model="name" type="text">
      <h1 class="template">{{name}}</h1>
    </div>
    <script src="./js/index1.js"></script>
    <script>
      const vm = new Myvue({
        el: "#app",
        data: {
          name: "vue 双向数据绑定test1"
        }
      });
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的vue 双向数据绑定的实现学习之监听器的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue 双向数据绑定的实现学习之监听器的实现方法

- Author -

adouwt

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
jQuery 插件开发指南
Nov 14 Javascript
js实现网页抽奖实例
Aug 05 Javascript
详解javascript遍历方式
Nov 11 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 #Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 #Javascript
微信小程序实现保存图片到相册功能
Nov 30 #Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
鲲鹏(1) PIL(1) 进度条(1) Python(3) 信号同步(1) Flask(2) GCN(1) 验证码(1) 裁剪图片(1) Pytesseract(1)
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
phpmyadmin配置文件现在需要绝密的短密码（blowfish_secret）的2种解决方法
2014/05/07 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Javascript实现html转pdf高清版（提高分辨率）
2020/02/19 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
2020/04/03 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python中的itertools的使用详解
2020/01/13 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
行政总经理岗位职责
2013/12/05 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
运动会表扬稿大全
2014/01/16 职场文书
技能比武方案
2014/05/21 职场文书
抗震救灾标语
2014/06/26 职场文书
2014年度工作总结报告
2014/12/15 职场文书
大学推普周活动总结
2015/05/07 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
MongoDB数据库之添删改查
2022/04/26 MongoDB