使用代理实现数据的双向绑定

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

<script>
	function Agency() {
		const proxy = new Proxy({},{
			get(obj,key) {
				return obj[key]
			},
			set(obj,key,value){
				obj[key] = value
				// 为标签中含有v-model并且值为当前key 的节点赋值
				document.querySelectorAll(`[v-model=${key}]`).forEach(item=>{
					item.value = value
				})
				// 为标签中含有v-bind并且值为当前key 的节点赋值
				document.querySelectorAll(`[v-bind=${key}]`).forEach(item=>{
					item.interHTML = value
				})
			}
		})
		this.init = function() {
			// 获取属性含有v-model的dom节点
			const els = document.querySelectorAll("[v-model]")
			els.forEach(item=>{
				item.addEventListener("keyup",function(){
					// 获取v-model的属性值，为其值进行 代理
					// console.log(this,'this')
					// console.log(this.getAttribute("v-model"),'v-model')
					proxy[this.getAttribute("v-model")] = this.value
				})
			})
		}
	}
	new Agency().init()
</script>