Vue.js 数据响应式原理浅析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45148841/article/details/107246457

本文接续上篇，探讨JavaScript的响应式实现，特别是关注Vue.js框架的数据响应式机制。通过一个简单的HTML和JS代码示例，展示了Vue.js如何在数据变化时自动更新视图。响应式的核心在于思维逻辑，理解这一机制对于前端开发者至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式 (二)

1:第一篇讲了如何在数据进行变更的时候对数据进行处理,proxy(代理)
下面是第一篇的链接:
js 响应式(一)之Proxy(代理)

现在我们来简单的说一下目前比较火的前端框架VUE
他的数据响应式是怎么做到的(简单的例子)
老规矩直接上代码:
html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
  <script src="js/a.js" ></script>
</head>
<body>
  <div  id="app">
{{name}}
<div>{{age}}</div>
  </div>

</body>
<script >
  var vm =  new abc({
        el:"#app",
        data:{
          name:"lili",
          age:17
        }
    })
   

  </script>
      </html>

引用的JS

class abc   //定义了一个类
{
	 	constructor(obj)  // 调用这个函数的时候返回  abc里的对象
	 	{
	 		this.option = obj  //把对象的值赋给 this.option 这个变量
	 		this._data = this.option.data;  //把对象的值赋给 this.option 这个私有变量
			 this.el = document.querySelector(this.option.el);//把对象赋给 this.option 这个私有变量
			 this.compileNode(this.el);//调用compileNode
	 	}
	 	compileNode(el){
			let  chile = el.childNodes ; //把返回节点的子节点集合赋给 chile
		
			[...chile].forEach(node=> {	 //展开 子节点集合  node 是索引
		
				let text = node.textContent // 获取  节点的文本信息
				let reg = /\{\{\s*([^\s\{\}]+)\s*\}\}/  //正则表达式
				if(node.nodeType===3)//如果是文本类型  3是文本类型
			{
			
			
			
				if(reg.test(text))
				{
					let $1 = RegExp.$1   //赋值给$1 符合正则表达式条件的第一条数据
				
					if(this._data[$1])    // 判断这个属性里的数据是否包含$1  为true
					{
						node.textContent=this._data[$1] //把这个索引下的文本替换为 this._data[$1] 里的数据
					}
				}
			}
			else if(node.nodeType===1)  //1是元素节点
			{
				// this.compileNode(node)
		
				if(reg.test(text)) //如果这个文本包含对应的节点信息,为true
				{
					let $1 = RegExp.$1 //赋值给$1 符合正则表达式条件的第一条数据
				
					if(this._data[$1])   // 判断这个属性里的数据是否包含$1  为true
					{
						node.textContent=this._data[$1] //把这个索引下的文本替换为 this._data[$1] 
					}
				}
			}
			});
			
	 	}
}