Vue响应原理 definedProperty与proxy实现数据双向绑定JavaScriptlys20000913的博客-

Vue中从改变一个数据到页面渲染改变的过程

Vue2 利用definedProperty实现数据绑定

definedProperty 基础使用：

 var ob={   a:1,   b:2 } var _value=ob.a  Object.defineProperty(ob,'a',{ //writable:true,//可否修改 //enumerable:false,//是否可被枚举 //configurable:false,//是否可被delete get(){//获取时触发函数    console.log('取值') return _value    }, set(a){//修改时触发函数,参数为修改的值    console.log('存值')    _value=a    return _value   }, }) 

实现Vue2 双向数据绑定

function vue(){ this.$data={a:1}; this.el=document.getElementById('add'); this.virtualdom=""; this.observe(this.$data); this.render; } vue.prototype.observe=function(obj){//数据监听 var value; var self=this; for(var key in obj){   vaule=obj[key]; if(typeof vaue=='object'){ this.observe(value) }else{    Object.defineProperty(obj,key,{ get(){//依赖收集 return value     }, set(newValue){//触发更新      value=newValue      self.render() }, }) } } } vue.prototype.render=function(){//数据渲染 this.virtualdom="I am "+this.$data.a  this.el.innerHTML=this.virtualdom } //数组监听~思想（未具体实现） var arrPro=Array.prototype; var arrayob=Object.create(arrayPro) var arr=['push','pop','shift']; arr.forEach((method,index)=>{  arrayob[methods]=function(){ var ret=arrayPro[methods].apply(this,arguments);   dep.notify();//vue源码中体现  return ret; } }) let num=0 let vm=new vue() setInterval(()=>{  console.log('修改')  vm.$data.a=num++ },2000) 

Vue3 利用proxy实现数据绑定

和defineProperty类似，功能几乎一样，用法不同 

• defineProperty是改变原有对象
• proxy是新建一个代理对象
• defineProperty只能监听某一属性不能设置去全对象监听；如果需要全对象监听则需要递归修改原对象相关属性，且defineProperty是对象的方法 数组无法监听；proxy可以对数组进行监听

Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。
实现Vue3双向数据绑定

function vue(){ this.$data={a:1}; this.el=document.getElementById('add'); this.virtualdom=""; this.observe(this.$data); this.render; } vue.prototype.observe=function(obj){//数据监听  var self=this; this.$data=new Proxy(this.$data,{ get(target,key){ return target[key] }, set(target,key,newValue){//触发更新     target[key]=newValue    self.render() }, }) } vue.prototype.render=function(){//数据渲染 this.virtualdom="I am "+this.$data.a  this.el.innerHTML=this.virtualdom } let num=0 let vm=new vue() setInterval(()=>{  console.log('修改')  vm.$data.a=num++ },2000)