proxy代理简单实现一下vue的双向绑定

<input type="text" v-model="title" />
<input type="text" v-model="title" />
<h3 v-bind="title"></h3>

比较low的方式

'use strict'
			let inputs = document.querySelectorAll('input')
			let h3s = document.querySelector('h3')
			let values = ''
			inputs[0].addEventListener('input', function () {
				values = inputs[0].value
				inputs[1].value = values
				h3s.textContent = values
			})
			inputs[1].addEventListener('input', function () {
				values = inputs[1].value
				inputs[0].value = values
				h3s.textContent = values
			})

proxy代理的方式

'use strict'
			//保存title数据
			let val = { title: '' }
			function View() {
				//代理val
				val = new Proxy(val, {
					//读
					get(obj, property) {},
					//写
					set(obj, property, value) {
					//修改输入框的值
						document.querySelectorAll(`[v-model="title"]`).forEach(item => {
							item.value = value
						})
						//修改h3的值
						document.querySelector(`[v-bind="title"]`).textContent = value
						return true
					},
				})
				this.init = function () {
					const els = document.querySelectorAll('[v-model]')
					els.forEach(item => {
						//监听input的input事件，将input的值实时传入到代理中
						item.addEventListener('input', function () {
							val.title = this.value
						})
					})
				}
			}
			new View().init()

两种方法都是在三者之间放一个值，监听输入事件，通过改变中间值来改变三者的值。