快捷搜索:  汽车  科技

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。实现数据双向绑定的方法有很多:其中比较有名的就是vue的数据劫持方式了; vue3版本之前是采用数据劫持结合发布者-订阅者模式的方式来实现数据的双向绑定;发布订阅模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(1)

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(2)

什么是MVVM模式

MVVM是由MVC发展而来 , 在传统的MVC模式中,Model是数据层,View层只负责展示数据,Controller层负责数据解析,但是对于复杂的数据结构,继续按照MVC的设计思路,将数据解析的部分放到了Controller里面,那么Controller就将变得相当臃肿(Controller被设计出来并不是处理数据解析的),为此开发者们专门为数据解析创建出了一个新的类:ViewModel,这就是MVVM模式

当用户操作 View(视图),ViewModal 感知到变化,然后通知 Modal 发生相应改变;反之当 Modal(数据) 发生改变,ViewModal 也能感知到变化,使 View 作出相应更新。

如何实现MVVM模式

实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据:

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(3)

关键点在于data如何更新view,因为view更新data其实可以通过事件监听即可,比如input标签监听 'input' 事件就可以实现了。所以我们着重来分析下,当数据改变,如何更新视图的。

实现数据双向绑定的方法有很多:

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(4)

其中比较有名的就是vue的数据劫持方式了; vue3版本之前是采用数据劫持结合发布者-订阅者模式的方式来实现数据的双向绑定;

设计模式--发布订阅

发布订阅模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(5)

数据劫持

所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。

Object.defineProperty()

它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set

var o = {}; var bValue; Object.defineProperty(o "b" { get : function(){ console.log('get') return bValue; } set : function(newValue){ console.log('set') bValue = newValue; } enumerable : true configurable : true }); o.b = 38; //触发对象o的set console.log(o.b)//触发对象o的get

api参考:https://developer. mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

基于数据劫持mvvm的双向绑定,必须要实现以下几点:数据监听器(observer)

对data中的所有数据做监听,通过Object.defineProperty 调用getter和setter方法对数据进行劫持,发生数据调用是触发get方法,发生数据改变时触发set方法;

/**监听数据变化**/ observer(data) { Object.keys(data).forEach(key => { let value = data[key]; let dep = new Dep(); Object.defineProperty(data key { configurable: true enumerable: true get() { //数据调用触发get,一旦调用数据就会添加到订阅中心 if (Dep.target) { dep.addSub(Dep.target); } return value; } set(newValue) { console.log("set" newValue); if (newValue !== value) value = newValue; //一旦数据改变,通知订阅者 dep.notify(newValue); } }) }) }指令解析器(compile)

获取调用相应数据的节点(文本节点或者是标签节点)并替换最新的数据,例如{{}};

循环遍历页面所有节点,获取到的所有文本节点或者是标签,判断当前是文本节点还是标签,拿到节点数据创建一个订阅对象;

compile(el) { // 获取需要挂载的根节点 let element = document.querySelector(el); this.compileNode(element); } compileNode(element) { // 模板解析 let childNodes = element.childNodes; // console.log(childNodes); Array.from(childNodes).forEach(node => { //如果是 文本节点 if (node.nodeType == 3) { //文本 // console.log(node); let nodeContent = node.textContent; // console.log(nodeContent); let reg = /\{\{\s*(\S*)\s*\}\}/; if (reg.test(nodeContent)) { // console.log("(" RegExp.$1 ")"); node.textContent = this._data[RegExp.$1]; // 创建一个订阅者 new Watcher(this RegExp.$1 newValue => { node.textContent = newValue; }); } } else if (node.nodeType == 1) { // 如果是标签 let attrs = node.attributes; // console.log(attrs); Array.from(attrs).forEach(attr => { // console.log(attr); let attrName = attr.name; let attrValue = attr.value; // console.log(attrName); if (attrName.indexOf("k-") == 0) { attrName = attrName.substr(2); console.log(attrName); if (attrName == "model") { node.value = this._data[attrValue]; } node.addEventListener("input" e => { // console.log(e.target.value); this._data[attrValue] = e.target.value; }) // 创建一个订阅者 new Watcher(this attrValue newValue => { node.value = newValue; }); } }) } if (node.childNodes.length > 0) { this.compileNode(node); } }) }数据订阅中心(Dep)

功能是添加订阅者和通知订阅者,具有存储和分发功能,发布者和订阅者都需要依赖订阅中心,任何发生调用的数据都会被添加到订阅中间,并且通知相应的订阅者;

//订阅中心,功能是添加订阅者和通知订阅者 class Dep { constructor() { this.subs = []; } addSub(sub) { this.subs.push(sub); } notify(newValue) { this.subs.forEach(v => { v.update(newValue); }) } }订阅者(Watcher)

初始化时,所有调用的节点都会创建成一个订阅者,当数据发生变化后触发相应的update更新回调函数;

//初始化new出n多个watcher对象,并传入对应的回调 //订阅者 class Watcher { constructor(vm exp cb) { //缓存自己 避免重复调用重复添加 Dep.target = this; vm._data[exp]; this.cb = cb; Dep.target = null } update(newValue) { console.log("更新了" newValue); this.cb(newValue); } }

整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(6)

Proxy数据代理

Proxy 在 ES2015 规范中被正式加入,在数据劫持这个问题上,Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问,都必须经过这层拦截。因此它可以劫持整个对象,并返回一个新对象,而不是 对象的某个属性,所以也就不需要对 keys 进行遍历。但是依旧不支持对象嵌套,支持数组的push,pop,shift

proxy的构造函数:

var proxy = new Proxy(target handler);

其中有两个参数:

target是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。

handler是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。

var arr = [1 2 3] var handle = { //target目标对象 key属性名 receiver实际接受的对象 get(target key receiver) { console.log(`get ${key}`) // Reflect相当于映射到目标对象上 return Reflect.get(target key receiver) } set(target key value receiver) { console.log(`set ${key}`) return Reflect.set(target key value receiver) } } //arr要拦截的对象,handle定义拦截行为 var proxy = new Proxy(arr handle) proxy.push(4)

但新标准同样也有劣势,那就是:

  • Proxy 的兼容性不如 Object.defineProperty() (caniuse 的数据表明,QQ 浏览器和百度浏览器并不支持 Proxy,这对国内移动开发来说估计无法接受,但两者都支持 Object.defineProperty())
  • 不能使用 polyfill 来处理兼容性
一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个栗子

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(7)

当用户填写表单时,View的状态就被更新了,如果此时可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定关系图如下

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(8)

二、双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架,双向绑定由三个重要部分构成

  • 数据层(Model):应用的数据及业务逻辑
  • 视图层(View):应用的展示效果,各类UI组件
  • 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来

而上面的这个分层的架构方案,可以用一个专业术语进行称呼:MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然,我们只需弄懂它是什么,便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是:

  • 数据变化后更新视图
  • 视图变化后更新数据

当然,它还有两个主要部分组成

  • 监听器(Observer):对所有数据的属性进行监听
  • 解析器(Compiler):对每个元素节点的指令进行扫描跟解析 根据指令模板替换数据 以及绑定相应的更新函数
三、实现双向绑定

我们还是以Vue为例,先来看看Vue中的双向绑定流程是什么的

  1. new Vue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中
  2. 同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在Compile中
  3. 同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher
  5. 将来data中数据⼀旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数

流程图如下:

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(9)

实现

先来一个构造函数:执行初始化,对data执行响应化处理

class Vue { constructor(options) { this.$options = options; this.$data = options.data; // 对data选项做响应式处理 observe(this.$data); // 代理data到vm上 proxy(this); // 执行编译 new Compile(options.el this); } }



对data选项执行响应化具体操作

function observe(obj) { if (typeof obj !== "object" || obj == null) { return; } new Observer(obj); } class Observer { constructor(value) { this.value = value; this.walk(value); } walk(obj) { Object.keys(obj).forEach((key) => { defineReactive(obj key obj[key]); }); } } 编译Compile

对每个元素节点的指令进行扫描跟解析 根据指令模板替换数据 以及绑定相应的更新函数

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(10)

class Compile { constructor(el vm) { this.$vm = vm; this.$el = document.querySelector(el); // 获取dom if (this.$el) { this.compile(this.$el); } } compile(el) { const childNodes = el.childNodes; Array.from(childNodes).forEach((node) => { // 遍历子元素 if (this.isElement(node)) { // 判断是否为节点 console.log("编译元素" node.nodeName); } else if (this.isInterpolation(node)) { console.log("编译插值⽂本" node.textContent); // 判断是否为插值文本 {{}} } if (node.childNodes && node.childNodes.length > 0) { // 判断是否有子元素 this.compile(node); // 对子元素进行递归遍历 } }); } isElement(node) { return node.nodeType == 1; } isInterpolation(node) { return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent); } } 依赖收集

视图中会用到data中某key,这称为依赖。同⼀个key可能出现多次,每次都需要收集出来用⼀个Watcher来维护它们,此过程称为依赖收集多个Watcher需要⼀个Dep来管理,需要更新时由Dep统⼀通知

简述vue的双向数据绑定步骤(Vue双向数据绑定是什么)(11)

实现思路

  1. defineReactive时为每⼀个key创建⼀个Dep实例
  2. 初始化视图时读取某个key,例如name1,创建⼀个watcher1
  3. 由于触发name1的getter方法,便将watcher1添加到name1对应的Dep中
  4. 当name1更新,setter触发时,便可通过对应Dep通知其管理所有Watcher更新

// 负责更新视图 class Watcher { constructor(vm key updater) { this.vm = vm this.key = key this.updaterFn = updater // 创建实例时,把当前实例指定到Dep.target静态属性上 Dep.target = this // 读一下key,触发get vm[key] // 置空 Dep.target = null } // 未来执行dom更新函数,由dep调用的 update() { this.updaterFn.call(this.vm this.vm[this.key]) } }

声明Dep

class Dep { constructor() { this.deps = []; // 依赖管理 } addDep(dep) { this.deps.push(dep); } notify() { this.deps.forEach((dep) => dep.update()); } }

创建watcher时触发getter

class Watcher { constructor(vm key updateFn) { Dep.target = this; this.vm[this.key]; Dep.target = null; } }

依赖收集,创建Dep实例

function defineReactive(obj key val) { this.observe(val); const dep = new Dep(); Object.defineProperty(obj key { get() { Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例 return val; } set(newVal) { if (newVal === val) return; dep.notify(); // 通知dep执行更新方法 } }); }

猜您喜欢: