JS实现双向绑定的几种方式

记录JS三种双向绑定1、第一种是通过Proxy数据代理来达到双向绑定的，这是Vue3更新的双向绑定方式。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Proxy双向绑定</title></head><body><

带刺玫瑰DCMG

4624人浏览 · 2021-12-07 09:48:53

带刺玫瑰DCMG · 2021-12-07 09:48:53 发布

记录JS三种双向绑定

1、第一种是通过Proxy数据代理来达到双向绑定的，这是Vue3更新的双向绑定方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proxy双向绑定</title>
</head>
<body>
    <div id="app">
        <h3 id="h3"></h3>
        <input type="text" id="input" />
    </div>
</body>
<script>
	const data = { text: 'hello' }
    const myTest = new Proxy(data, {
    	get(target, prop) {
            myTest.text = target[prop];
            document.getElementById('input').value = target[prop]
            return true
        },
        set: function (target, prop, value) {
            if (prop === 'text') {
                target[prop] = value
                document.getElementById('h3').innerHTML = value
                return true;
            }else{
				return false;
			}
		}
    });
    myTest.text
    document.getElementById('input').addEventListener('input', e => myTest.text = e.target.value)
</script>
</body>
</html>

2、第二种是通过Object.defineProperty结合观察者来达到双向绑定的，这是Vue2的双向绑定方式，在此只记录用法，没有观察者。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineProperty双向绑定</title>
</head>
<body>
    <div id="app">
        <h3 id="h3"></h3>
        <input type="text" id="input" value="默认值"/>
    </div>
</body>
<script>
	var obj = {};
	let myTest=Object.defineProperty(obj, 'text', {
		get: function () {
            console.log('触发get操作')
			document.getElementById("h3").innerHTML=document.getElementById("input").value
            return 'abd'
        },
        set: function (value) {
            console.log('触发set操作',value);
            document.getElementById('h3').innerText = value;
        }
	})
	myTest.text;
    document.getElementById('input').addEventListener('input', e => myTest.text = e.target.value)
</script>
</body>
</html>

3、第三种是触发对象的内置get、set方法，每个对象都有自己的get、set方法，只要操作对象内置的get和set也能达到双向响应的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触发对象内置get、set方法</title>
</head>
<body>
    <div id="app">
        <h3 id="h3"></h3>
        <input type="text" id="input"/>
    </div>
</body>
<script>
	let myTest={
		name:"这是一个默认值",
		get text(){
            console.log("触发了get：")
            document.getElementById("h3").innerHTML=this.name;
            document.getElementById("input").value=this.name;
            return this.name
        },
        set text(value){
            document.getElementById("h3").innerHTML=value;
            document.getElementById("input").value=value;
            console.log("触发了set："+value)
        }
	}
    myTest.text;
    console.log(myTest)
    document.getElementById('input').addEventListener('input', e => myTest.text = e.target.value);
</script>
</body>
</html>

双向绑定可以有很多种形式，这只是其中三种形式，有两种是参照Vue的响应方式。三种方式都有同一行代码：《myTest.text;》这行代码只是为了触发get方法，使get方法起到作用而已。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^