使用代码来简单理解vue2.0和vue3.0的响应式原理

養狗散戶

已于 2022-04-30 16:36:25 修改

阅读量109

点赞数

文章标签： vue vue.js

于 2022-04-30 16:33:56 首次发布

本文链接：https://blog.csdn.net/qq_34184472/article/details/124514779

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="contanier">
<input type="text" id="name" οninput="handleInput(event,this)">
<input type="text" id="year" οninput="handleInput(event,this)">
<input type="text" id="age" οninput="handleInput(event,this)">
<div>
数据变化如下 vue2.0:
<span id="vue2"></span>
</div>
<div>
数据变化如下 vue3.0:
<span id="vue3"></span>
</div>
</div>
<script>

const obj = observe({
   year:'',
   age:''
},(key,value)=>{
   document.getElementById("vue2").innerHTML = key+":"+value
});

const obj1 = observe2({
   year:'',
   age:''
},(key,value)=>{
   document.getElementById("vue3").innerHTML =key+":"+value
});

function observe2(obj,callback){
   return new Proxy(obj,{
       get:(target,key)=>{
           return targetp[key]
       },
       set:(target,key,value)=>{
       target[key]=value;
       callback(key,value)
       }
   })

   /*return new Proxy(obj,{
   get(target,key){
       return target[key]
   },
   set(target,key,value){
       target[key]=value
       callback(key,value)
   }
})*/
}
</script>
</body>
</html>