大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
从开始学习前端到现在走在进入中高级前端开发的路上，觉得上手容易又简单的就是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
总结
先回顾一下，好吧，上面已经回顾了。看图：
官方图：
我们只看了Observer劫持监听、Dep添加订阅者、通知变化、Watcher更新三个模块。Compile之后再看，大家可以自己去查阅资料。希望看完本文档对大家理解vue的双向绑定能有初步了解。
发布者-订阅者模式：
其实就是上文说到的假的“事件监听”，即发布者收集订阅者信息，在发布者进行发布时，通知订阅者进行处理。
观察者模式：
对对象进行监测，如果对象作出一些动作，即进行相关操作。
附：
作者是一前端开发学习者，整体思路基于个人的学习理解，描述的内容如有错误和不足，欢迎指正和批评。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/184744.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
