计算机系统应用教程网站

网站首页 > 技术文章 正文

简单实现vue的双向绑定 vue双向绑定怎么用

btikc 2024-10-12 13:24:57 技术文章 9 ℃ 0 评论

vue的兴起源于入手简单,对数据的双向绑定,

以及语法的友好性.相对于react的最大优势大概就是数据的双向绑定了.但是你知道双向绑定到底是如何实现的吗?

可能你会说的Object.defineProperty()来实现的.确实没错 但是这只是实现了数据的单向绑定还需要结合订阅发布来实现.

<!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>
 <input type="text" id='input'>
 <p id='p'></p>
 </div>
</body>
</html>

先简单的实现一个页面输入框

在实现双向绑定前,我们先熟悉一下Object.defineProperty()语法,MDN给出的解释Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

我们现在需要好好了解一下descriptor, 属性描述描述什么呢? 数据的变化是否可读写,是否可以删除等等 是对于我们定义的obj.prop的一个描述.descriptor函数内部包含set 与 get

get当有该属性的的时候会发生,

set当数据变动的时候发生改变默认值为undefined

拥有以上属性的时候我们就可以开始设计了

const data = {};//定义一个对象
 let _data = null//存储数据绑定后的值 防止死循环
 const input = document.getElementById('input');//获取input框
 const p = document.getElementById('p');//获取p的行展示通过input改变的数据层
 Object.defineProperty(data, 'text', {
//设置定义data的对象和text属性
 set(value) {
 console.log(value)
//当data数据层的值复制给input框
 // data.text = value
 input.value = value
 _data = value
 },
 get() {
 return _data
 }
 });
 input.onchange = function (e) {
 data.text = e.target.value;
 p.innerHTML = data.text
 //将input改变视图层的值赋值给数据层并展示出来
 }

视图层到数据层确定ok

数据层到视图层同样ok

vue则是通过这样的思路去实现框架中的绑定.想深入了解的同学建议去看源码,vue需要对对象的深层次递归遍历来进行绑定.

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表