v-model 实现原理
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=s, initial-scale=1.0" />
<title>v-model实现原理</title>]
</head>
<body>
<h1>v-model实现原理</h1>
<input type="text" id="model" />
<br />
文本框的value: <span id="models"></span>
<script>
let obj = {}
Object.defineProperty(obj, 'model', {
get: function () {
console.log('取值')
},
set: function (val) {
console.log('设置值')
document.getElementById('models').innerText = val
},
})
document.getElementById('model').addEventListener('keyup', function () {
obj.model = event.target.value
})
</script>
</body>
</html>
v-model就完成了,复制代码运行就可以实现了,是不是很简单,只要懂得defineProperty,以上是vue2的双向绑定的原理,vue3与2区别不大,vue3使用的是es6新增的proxy来进行数据劫持,用法与es5差不多. 不过vue3肯定比2要有优势:defineProperty 只能监听某个属性,如果要全部监听要用循环来实现,proxy只用绑定整个对象就可以,数组也可以监听,因为vue可以检测到数组内部数据的变化.
