JS双向数据绑定的原理介绍
Posted 坤小
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS双向数据绑定的原理介绍相关的知识，希望对你有一定的参考价值。
1.双向数据绑定的原理：属性拦截
2.属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。
3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈：JS数据属性与访问器属性
4.本小节主要模拟vue的双向数据绑定原理，由于vue渲染数据使用了虚拟DOM技术，比较复杂，所以这里笔者就稍微了写简单一些哈。主要的目的是为了双向绑定的原理，而不是虚拟DOM渲染的原理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入文本" v-model=" msg "><br>
您输入的文本是：<p> msg </p> <br>
<button onclick="app.msg = '我是黑马保健坤'">点我修改文本</button>
</div>
<script>
function hmVue(obj)
//querySelector默认只会获取满足选择器条件的第一个元素
// vue的挂载点el只能选中一个元素的原理
this.el = document.querySelector(obj.el);
// vue会将data对象中的成员平铺到vue实例中
this.msg = obj.data.msg;
this._msg = this.msg;
/*
双向数据绑定的原理 ： 属性拦截
*/
//1.监听data -> 开始监听data中的数据变化
Object.defineProperty(this, "msg",
get: function ()
console.log('有人想要读取我的值');
return this._msg;
,
set: function (newValue)
console.log('外部赋值时的传参' + newValue);
this._msg = newValue;
// data值变化 ： 修改input的value值
input.value = newValue;
// data值变化 ： 渲染到页面
var p = document.querySelector('p');
p.innerText = newValue;
);
//2.监听input -> 开始监听input表单的value值变化
//利用属性选择器，选中使用了 v-model指令的表单元素
var input = document.querySelector(`$obj.el [v-model]`);
//监听输入框value值变化（这里我直接使用了oninput事件），其实使用属性拦截不仅可以让表单元素实现双向数据绑定，还可以让页面任何元素都能实现双向数据绑定
input.oninput = function()
// input值变化 ， 修改data中的数据
this.msg = input.value;
.bind(this);
;
var app = new hmVue(
el: '#app',
data:
msg: ''
);
</script>
</body>
</html>
以上是关于JS双向数据绑定的原理介绍的主要内容，如果未能解决你的问题，请参考以下文章