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

全栈程序员站长

发布于 2022-11-10 16:30:17

1.6K0

发布于 2022-11-10 16:30:17

Vue双向绑定原理初学

双向绑定

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

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

双向绑定

概念

概念：MVVM的双向绑定是指：视图变化更新数据，数据变化更新视图，视图与数据两者相互关联。 vue官网有提到view和model两个概念，分别对应这里的视图层和数据层，而实现两者相互关联的就是vue的viewmodel即vue 实例。(如下图）

第一步视图变化更新数据，即用户界面的行为触发数据的变化。这个是我们经常使用到的：通过事件监听，执行数据处理逻辑。第二步数据变化更新视图，那么问题来了：怎么在数据变化时去更新相关的视图？乍一看这是什么问题，直接在数据变化时去操作dom不就可以了吗？是的，想法没错。但是，有两个问题：

要知道数据什么时候变化，不可能在每个更改数据的地方去操作dom
去更新哪些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