利用 JavaScript 实现 Vue2.0 数据双向绑定原理

Object.defineProperty 方法

语法格式如下：

Object.defineProperty(obj, prop, descriptor)

• obj：目标对象，即需要添加或修改属性的那个对象。
• prop：属性名，即要定义或修改的属性的名称。
• descriptor：属性描述符，一个对象，用于定义该属性的具体特征。

obj 和 prop 的概念相对直观。例如，若定义一个变量为 o，则 obj 对应 o，prop 对应 o.name。接下来重点分析 descriptor 参数。

const o = {
    name:'xbhog'
}

其中 obj 指的是 o，prop 指的是 o.name，下面我们主要看看 descriptor。

descriptor 是目标对象属性的一些特征（它是一个对象）。descriptor 下包含 6 个参数： 参数 1： value：属性的值。 参数 2： writable：表示对象属性值是否可以被修改，true 允许，false 不允许。 参数 3： configurable：表示对象属性是否可以被删除，true 允许，false 不允许。 参数 4： enumerable：表示对象属性是否可被枚举。 参数 5： get()：是一个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值。 参数 6： set()：是一个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，即赋值的新值。

注意：描述符里的 value 属性、writable 属性与 get 属性、set 属性是互斥的关系，只能存在一组。

了解了前置知识，我们来实现 Vue 中的 v-model 的双向绑定

先看实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过js实现数据的双向绑定</title>
</head>
<body>
    
<input type="text"/><br>
<h1>你好：<span>更新数据</span></h1>


<!-- 通过js实现数据的双向绑定 -->
<script>
	// 方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象
    var ipt =document.querySelector('input');
    var p = document.querySelector('span');
	
	
    var data = {name:""};
	/* 
	    oninput 事件在用户输入时触发。
	    该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
	 */
    ipt.oninput = function(){
	// 将ipt.value中的值传给data.name的value
        data.name = ipt.value;
    }
    //劫持ipt.value
    Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
        return ipt.value;  //当访问的时候会调用get方法
    },
    // 数据劫持
	//name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

首先我们通过 document.querySelector 获取 input 以及 span 标签的 Html 对象，在定义一个 data 对象，属性 name 先为空。

使用事件监听 oninput 来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。

将 ipt.value 中的值传给 data.name 的 value；

data.name = ipt.value;

利用 Object.defineProperty 劫持用户输入的数据。

• get 属性：是个函数，当访问该属性的时候，函数自动调用，函数返回值就是该属性的值
• set 属性：是个函数，当修改该属性的时候，函数自动调用，函数有且只有一个参数，赋值的新值

Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
       return ipt.value;  //当访问data.name时候会调用get方法，调用ipt.value获取当前value的值
    },
    // 数据劫持
    set(value) {   //设置数据的时候会自动调用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比较明显：

set 方法：

get 方法：

最后实现效果：

参考资料：

• https://blog.csdn.net/Doulvme/article/details/107978012
• https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
• https://www.jianshu.com/p/6f589af16ad4
• //www.jb51.net/article/217657.htm (推荐)

总结

到此这篇关于利用js实现Vue2.0中数据双向绑定功能的文章就介绍到这了,更多相关js实现Vue2双向绑定内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！