- 众所周知,v-model是vue中双向绑定的语法糖,使用起来非常方便,面试中问到双向绑定的原理,都知道是数据劫持(Object.defineProperty)和订阅发布模式结合实现,更有甚者让你手动实现双向绑定,鄙人有幸被怼,和大家分享一下我实现的双向绑定.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="ip">
<span id="sb"></span>
<script>
// 数据劫持
var obj = {};
Object.defineProperty(obj,'hello',{
set: function(newValue){
document.getElementById('ip').value = newValue
document.getElementById('sb').innerHTML = newValue
}
});
document.addEventListener('keyup',function(e){
obj.hello = e.target.val