1. 全栈程序员必看首页

vue的双向绑定原理_数据双向绑定原理

全栈程序员-用户IM • • 未分类

vue的双向绑定原理_数据双向绑定原理Vue双向绑定原理入门双向绑定概念数据可观测依赖收集完整示例总结从开始学习前端到现在走在进入中高级前端开发的路上，觉得上手容易又简单的就是Vue框架，包含其相关的生态系统。一直只是简单了解双向绑定的原理，并没有手动去实现或者去拜读过源码。而vue双向绑定基本是面试必考项，通过这段时间的学习，输出以下双向绑定的简单实现示例。参考文章：通俗易懂了解Vue双向绑定原理及实现双向绑定概念概念：…

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

Vue双向绑定原理初学

从开始学习前端到现在走在进入中高级前端开发的路上，觉得上手容易又简单的就是Vue框架，包含其相关的生态系统。一直只是简单了解双向绑定的原理，并没有手动去实现或者去拜读过源码。而vue双向绑定基本是面试必考项，通过这段时间的学习，输出以下双向绑定的简单实现示例。

参考文章：
通俗易懂了解Vue双向绑定原理及实现

双向绑定

概念

概念：MVVM的双向绑定是指：视图变化更新数据，数据变化更新视图，视图与数据两者相互关联。
vue官网有提到view和model两个概念，分别对应这里的视图层和数据层，而实现两者相互关联的就是vue的viewmodel即vue 实例。(如下图）
在这里插入图片描述
第一步视图变化更新数据，即用户界面的行为触发数据的变化。这个是我们经常使用到的：通过事件监听，执行数据处理逻辑。
第二步数据变化更新视图，那么问题来了：怎么在数据变化时去更新相关的视图？乍一看这是什么问题，直接在数据变化时去操作dom不就可以了吗？是的，想法没错。但是，有两个问题：

  1. 要知道数据什么时候变化，不可能在每个更改数据的地方去操作dom
  2. 去更新哪些dom，这些依赖于当前数据的dom怎么收集到？什么时候去搜集？

把这两个问题弄清楚，解决掉，基本就可以实现一个简单的双向绑定逻辑了，也就能更好的理解vue的双向绑定的实现原理。
后续为了方便描述，我们把依赖于数据的dom（当然不止是dom，还可能是其他的）称为订阅者。

数据可观测

第一个问题，要知道源数据什么时候变化，在变化时进行后续更新操作。“在一个对象时候变化时，进行一系列逻辑处理”，这种模式是不是很熟悉：事件监听。因为是针对数据的，所以这里应该是监听数据，问题就变为如何监听数据的变化，换一种说法就是如何实现数据的可观测。
Javascript有一个方法Object.defineProperty() ：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Object.defineProperties()是他的复数方法。

Object.defineProperty()可以定义属性的存取描述符即setter/getter方法：

get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
默认为 undefined。

所以我们可以通过这个方法去给我们要监听的数据做监听：使用 Object.defineProperty 把这些属性全部转为 getter/setter（vue就是对data这么做的），这样就可以在set方法里监测到数据的变化，那我们第一个问题就解决掉了。
我们先定义一个转化属性为getter/setter的方法：

// 定义实现监测响应的方法
function defineReactive(obj, key, val) { 
	observe(val); // 递归进行数据监测
	Object.defineProperty(obj, key, {
		get() {
			console.log(`获取${key}的值`);
			return val;
		}, 
		set(newValue) {
			console.log(`设置${key}的值`);
			val = newValue;
		}
	})
}

// 定义初始化数据响应的方法
function obeserve(data) {
	if(!data || typeof data !== 'object') {
		return;
	}
	let keys = Objec.keys(data);
	keys.forEach((key) => {
		defineReact(data, key, data[key]);
	})
}

依赖收集

我们现在知道怎么监测到数据变化了，下面看一下如何确定要更新的对象——订阅者。我们需要把订阅者收集起来，在数据发生变化的时候统一通知他们进行更新。
还是Object.defineProperty()，看一下上面它的get方法：当访问该属性时，该方法会被执行。我们要收集订阅者，是不是就可以在订阅者初始化的时候调用一下数据的get，触发收集方法。
首先定义一个用来存放订阅者的容器：

class Dep {
	constructor() {
		this.subs = [];
	},
	addSub(sub) {
		this.subs.push(sub);
	}, 
	depend() { // 判断是否要添加依赖
		if(Dep.target) {	
			this.addSub(Dep.target);
		}
	}, 
	notify() {
		this.subs.forEach((sub) => {
			sub.update(); // 元素进行更新
		})
	}
}

Dep.target = null
// 稍微改造下监测逻辑
function defineReactive(obj, key, val) { 
	observe(val);
	let dep = new Dep();
	Object.defineProperty(obj, key, {
		get() {
			dep.depend();
			console.log(`获取${key}的值`);
			return val;
		}, 
		set(newValue) {
			console.log(`设置${key}的值`);
			val = newValue;
			dep.notify();
		}
	})
}

我们想在get的时候去收集订阅者，如何把订阅者传到容器里进行收集呢？这里给容器添加了一个参数target作为订阅者的缓存，当需要收集时，即把订阅者赋值给Dep.target，Dep就会在添加时将其加入到订阅者数组Dep.subs中。

上面我们说了为了将订阅者信息进行收集，在每个订阅者初始化的时候去调用依赖数据的get方法。而我们只需要在初始化的时候去进行订阅者收集，所以，只有在初始化时去缓存当前的订阅者。如下：

class Watcher {
	constructor(vm, exp, cb) {
		this.vm = vm;
		this.exp = exp;
		this.cb = cb;
		this.value = this.get(); // 初始化时执行一下get
	},
	get() {
		Dep.target = this; // 缓存自己
		let value = this.vm.data[this.exp]; // 会触发依赖的收集
		Dep.target = null;
		return value;
	}, 
	update() {
		let value = this.vm.data[this.exp];
		let oldValue = this.value;
		if(oldValue !== value) {
			this.value = value;
			this.cb.call(this.vm, value, oldValue1);
		}
	}
}

到这里，我们先是通过Object.defineProperty()实现了数据的可观测，定义Dep作为订阅者容器，在订阅者初始化时，触发数据的get方法，在数据get方法里执行Dep中添加依赖的方法，完成对订阅者的收集。再就是在数据的set方法中执行订阅者容器的notify，通知各个订阅者进行更新。就酱。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 双向绑定</title>
</head>
<body>
    <h1 id="test"></h1>
    <input type="text">
    <input type="button" value="改变data内容" onclick="changeInput()">
    
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script>
    function myVue (data, el, exp) {
        this.data = data;
        observable(data);                      //将数据变的可观测
        el.innerHTML = this.data[exp];           // 初始化模板数据的值
        new Watcher(this, exp, function (value) {
            el.innerHTML = value;
        });
        return this;
    }

    var ele = document.querySelector('#test');
    var input = document.querySelector('input');
    
    var myVue = new myVue({
        message: 'hello world'
    }, ele, 'message');
    
    //改变输入框内容
    input.oninput = function (e) {
        myVue.data.message = e.target.value
    }
    //改变data内容
    function changeInput(){
        myVue.data.message = "Five hundred away"
    
    }
</script>
</body>
</html>
observer.js

总结

先回顾一下，好吧，上面已经回顾了。看图：
在这里插入图片描述

官方图：
在这里插入图片描述

我们只看了Observer劫持监听、Dep添加订阅者、通知变化、Watcher更新三个模块。Compile之后再看，大家可以自己去查阅资料。希望看完本文档对大家理解vue的双向绑定能有初步了解。

发布者-订阅者模式：
其实就是上文说到的假的“事件监听”，即发布者收集订阅者信息，在发布者进行发布时，通知订阅者进行处理。

观察者模式：
对对象进行监测，如果对象作出一些动作，即进行相关操作。

附：
作者是一前端开发学习者，整体思路基于个人的学习理解，描述的内容如有错误和不足，欢迎指正和批评。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/184744.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号