一、原理
1.原理
- vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2.核心
- 关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
3.Object.defineProperty()方法
- （1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
- （2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
二、简单实现js的双向数据绑定
<div id="app">
<input type="text" id="ipt">
<h3 id="txt"></h3>
</div>
<script>
//模拟数据模块
var msg="hello world";
//建立对象
var obj={};
Object.defineProperty(obj,'value',{
//设置get、set访问器
get(){
return this._value;
},
set(val){
this._value=val;
ipt.value=val;
txt.innerText=val;
}
});
obj.value=msg;
//监听文本框输入
ipt.addEventListener("input",function(){
obj.value=this.value;
console.log(obj.value);
})
- 这个例子实现的效果是：随着文本框输入文字的变化，h3中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。
- 通过添加事件监听input来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了h3标签内的文本。
三、实现一个真正的双向绑定的原理
1.MVVM模式
- 首先，要知道的是vue的设计模式是MVVM三层结构。
- 那么MVVM模式在Vue.js中ViewModel是如何和View以及Model进行交互的？
2.实现数据双向绑定过程
- （1）将vue中的data中的内容绑定到输入文本框和文本节点中
- （2）当文本框的内容改变时，vue实例中的data也同时发生改变
- （3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化
第一步：绑定内容
- DocuemntFragment（碎片化文档）：可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
- 注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
- 实现内容绑定
- 我们要考虑两个问题，一个是如何绑定要input上，另一个是如何绑定要文本节点中。
- 因为我们已经获取到了div的所以子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新添加入DocumentFragment中。
- 首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容
- 然后，在向碎片化文档中添加节点时，每个节点都处理一下。
- 创建Vue的实例化函数，就成功将内容都绑定到了输入框与文本节点上。
第二步：实现view => model
- 从输入框考虑，输入框的问题，输入框如何改变data。我们通过事件监听器keyup，input等，来获取到最新的value，然后通过Object.defineProperty将获取的最新的value，赋值给实例vm的text，我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性，这样给vm.text赋值，就触发了set。set函数的作用一个是更新data中的text，第二个作用 就是来提醒订阅者进行操作，告诉他们：“我的text变了！” 文本节点变成了订阅者，接到消息后，立马进行update操作
- 首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化
- 然后，实现一个观察者，对于一个实例 每一个属性值都进行观察。
- 改写编译函数，注意由于改成了访问器属性，访问的方法也产生变化，同时添加了事件监听器，把实例的text值随时更新
- 实例函数中，观察data中的所有属性值，注意增添了observe
第三步；实现model => view
- 通过修改vm实例的属性改变输入框的内容与文本节点的内容。
- 这里涉及到一个问题 需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。
- 但是，我们可能在页面中多处用到 data中的属性，这是1对多的。也就是说，改变1个model的值可以改变多个view中的值。
- 所以我们就可以采取订阅/发布者模式
- 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
- 发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
- 发出通知 => 触发订阅者的 update 方法 => 更新视图。
- 这里的关键逻辑是：如何将 watcher 添加到关联属性的 step 中。
- 注意： 我把直接赋值的操作改为了 添加一个 Watcher 订阅者
- Watcher又该做些什么呢？
- 首先，将自己赋给了一个全局变量 step.target；
- 其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 方法，get 方法中将该 watcher 添加到了对应访问器属性的 step 中；
- 再次，获取属性的值，然后更新视图。
- 最后，将 step.target 设为空。因为它是全局变量，也是 watcher 与 step 关联的唯一桥梁，任何时刻都必须保证 step.target 只有一个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model='msg'/>
{{msg}}
</div>
<script>
var step;
//编译节点的方法
function compile(node, vm) {
var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx
//如果是元素节点
if(node.nodeType===1)
{
var attr=node.attributes;
//遍历所有节点属性
for(var i=0;i<attr.length;i++)
{
if(attr[i].nodeName=="v-model")
{
//console.log(attr[i].nodeValue);
var name=attr[i].nodeValue;//看看与哪个数据相关
node.addEventListener("input",function (e){
//将与其相关的数据改为最新值
vm[name]=e.target.value;
});
//vue对象上的data属性上的msg值给到界面
node.value=vm.data[name];
node.removeAttribute("v-model");
}
}
}
//如果是文本节点
else if(node.nodeType===3)
{
if(reg.test(node.nodeValue))//{{msg}}
{
var name=RegExp.$1.trim();//获取到匹配的字符串
//node.nodeValue=vm.data[name];//将data中的值赋予给该node
//创建监听者
new watch(vm,node,name);
}
}
}
//获取当前app节点内部的所有子节点
function nodeToFragment(node, vm) {
var fragment = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
fragment.appendChild(child);
}
return fragment;
}
//订阅集合
function Step()
{
this.subs=[];
}
Step.prototype={
addSub(sub){
//添加订阅
this.subs.push(sub);
},
update(){
//更新订阅
this.subs.forEach((sub)=>{
//实现更新
//console.log("重新更新");
//调用的是订阅者自身的update
sub.update();
});
}
}
//构建一个函数类 监听属性变化的功能
function changeData(obj,key,val){
step=new Step();
Object.defineProperty(obj,key,{
get(){
//console.log("添加订阅");
//添加订阅
if(step.target)
{
//添加当前的监听者
step.addSub(step.target);
}
return val;
},
set(newval){
//console.log("更新");
if(newval==val)
{
return;
}
val=newval;
//修改完成值之后 进行通知
step.update();
}
});
}
//创建函数 执行这个观察者里面的遍历
//这个观察者是对这个订阅集合进行遍历的
function observe(obj,vm)
{
for(let key of Object.keys(obj))
{
changeData(vm,key,obj[key]);
}
}
//创建监听 单独的订阅者
function watch(vm,node,name){
step.target=this;
this.vm=vm;
this.name=name;
this.node=node;
this.update();
step.target=null;
}
watch.prototype={
update(){
this.get();
//用变化之后值修改界面元素
this.node.nodeValue=this.value;
},
get(){
//获取当前vue中msg变化之后的值
this.value=this.vm[this.name];
}
}
//模拟一个vue对象
function Vue(options) {
this.data = options.data;
//大的观察者
observe(this.data,this);
let id = options.el.match(/(?<=#)\w+/)[0];
//获取当前的节点
let dom = nodeToFragment(document.getElementById(id), this);
//console.log(dom);
document.getElementById(id).appendChild(dom);
}
new Vue({
el: '#app',
data: {
msg: "Hello world!!"
}
});
</script>
</body>
</html>
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
