1.通过Object.defineProperty监听数据的get,set来做一些我们想去做的事情(像是vue vdom数据更新的updateComponent)
2.将data属性代理到了vm上
3.代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1"></p>
<input type="text" id="input1" name="input1">
</body>
<script>
var p1=document.getElementById('p1')
var input1=document.getElementById('input1')
var obj={
name:'数据'
}
p1.innerHTML=obj.name
input1.value=obj.name
Object.defineProperty(obj,'name',{
set(newdata){
p1.innerHTML=newdata
console.log(111);
},
get(newdata){
console.log(222);
}
})
input1.onchange=function(){
obj.name=input1.value
}
</script>
</html>