VUE双向绑定原理_vue的数据绑定怎么实现

全栈程序员-站长 • 2025年11月14日下午2:22 • 未分类 • 阅读 3

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

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

烂大街原理：数据劫持+发布订阅者模式 (obect.defineProperty())……..(此处省略8888个字节)。

话不多说上代码

HTML:

<div id="app">
	<div>
	    <div v-text="myText"></div>
	    <div v-text="myBox"></div>
		<input type="text" v-model="myText">
	</div>
</div>

JS:仿vue数据初始化

const app = new Vue({
	el:'#app',
	data:{
		myText:'数据响应式',
		myBox:'我是一个盒子'
	}
})

核心：发布订阅者模式

//		发布订阅者设计模式
//		发布者化整为零，
		class Vue{
			constructor(options){
				this.options = options;
				this.$data = options.data;
				this.$el = document.querySelector(options.el);
				this._directive = {}; 
				
				this.Observer(this.$data);
				this.Complie(this.$el);
			}
			//劫持数据
			Observer(data){
				for( let key in data ){
					this._directive[key] = [];
					console.log(this._directive)
					let Val = data[key];
					let watch = this._directive[key];
					Object.defineProperty(this.$data, key, {
						get : function(){
							return Val;
						},
						set : function(newVal){
							if( newVal !== Val ){//新值不等于老值
								Val = newVal;
								//更新视图
								console.log(watch,'watch')
								watch.forEach(element => {
									element.update();
								})
							}
						}
					})
				}
			}
			//解析指令
			Complie(el){
				let nodes = el.children;
				for(let i = 0;i < nodes.length; i++){
					let node = nodes[i];
					if( nodes[i].children){
						this.Complie(nodes[i]);
					}
					if(node.hasAttribute("v-text")){
//						console.log(1)
						let attrVal = node.getAttribute('v-text');
						this._directive[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'));
//						console.log(this._directive);
					}
					if(node.hasAttribute("v-model")){
						let attrVal = node.getAttribute('v-model');
						this._directive[attrVal].push(new Watcher(node,this,attrVal,'value'));
//						console.log(this._directive);
						node.addEventListener('input',(function(){
							return function(){
								console.log(1);
								this.$data[attrVal] = node.value;
							}
						})().bind(this));
						
					}
				}
			}
		}
//		订阅者
		class Watcher{
//			div.innerHTML = vue对象.$data['myText'];
			constructor(el, vm, exp, attr){
				this.el = el;
				this.vm = vm;
				this.exp = exp;
				this.attr = attr;
				this.update();
			}
			update(){
				this.el[this.attr] = this.vm.$data[this.exp];
			}
		}

浏览器展示效果：

VUE双向绑定原理_vue的数据绑定怎么实现