绿色网站设计,山东网站建设公司哪家权威,wordpress支付即展示,系统开发费什么是响应式 Js代码是自上而下执行的#xff0c;结合下面代码看#xff0c;代码执行后#xff0c;会打印两次double的结果#xff0c;结果也都是2#xff0c;即使修改了代码中count的值后#xff0c;double的值也不会发生任何改变。
let count 1
let double count * …什么是响应式 Js代码是自上而下执行的结合下面代码看代码执行后会打印两次double的结果结果也都是2即使修改了代码中count的值后double的值也不会发生任何改变。
let count 1
let double count * 2
console.log(double)
count 2
console.log(double)double的值由count的值乘以2所得若想让double能够在count变化时也变化那就要在每次修改countd的值时重新计算double。如下面代码
let count 1
// 计算过程封装成函数
let getDouble nn*2 //箭头函数
let double getDouble(count)
console.log(double)count 2
// 重新计算double这里我们不能自动执行对double的计算
double getDouble(count)
console.log(double) 若可以将getDouble函数自动执行我们使用某种机制把count包裹一层每当count进行修改时就去同步更新double的值那就有了double自动跟着count变化而变化的感觉这就是响应式的雏形。
响应式的原理 Vue中用过defineProperty、Proxy和value setter三种响应式解决方案。 defineProperty API 结合例子来说明下面定义一个对象obj,使用defineProperty代理count属性。这样就对obj对象的value属性实现了拦截读取count属性时执行get函数修改count属性时执行set函数并在set函数内部重新计算了double。这样就实现了简易的响应式功能。
let getDouble nn*2
let obj {}
let count 1
let double getDouble(count)Object.defineProperty(obj,count,{get(){return count},set(val){count valdouble getDouble(val)}
})
console.log(double) // 22222
obj.count 2
console.log(double) // 4444 有种自动变化的感觉 defineProperty API作为Vue2实现响应式的原理语法上也有一些缺陷比如如下代码中删除obj.count属性set函数就不会执行double还是之前的值这也是为什么Vue2中,需要$delete一个专门的函数去删除数据。
delete obj.count
console.log(double) // doube还是4
Proxy Vue3的响应式机制就是基于Proxy实现的从Proxy这个名字也能看出是代理的意思Proxy的重要意义在于它解决了Vue2响应式的缺陷。看下面代码通过new Proxy代理obj这个对象,然后通过get、set和deteleProperty函数代理了对象的读取、修改和删除操作从而实现了响应式的功能。
let proxy new Proxy(obj,{get : function (target,prop) {return target[prop]},set : function (target,prop,value) {target[prop] value;if(propcount){double getDouble(value)}},deleteProperty(target,prop){delete target[prop]if(propcount){double NaN}}
})
console.log(obj.count,double)
proxy.count 2
console.log(obj.count,double)
delete proxy.count
// 删除属性后我们打印log时输出的结果就会是 undefined NaN
console.log(obj.count,double) Proxy是针对对象来监听的而不是针对某个具体属性所以不仅可以代理那些定义时不存在的属性还可以代理更丰富的数据结构比如Map、Set等并且还能通过deleteProprety实现对删除操作的代理。
value setter
Vue3中还有一种响应式实现的逻辑就是利用对象的get和set函数来进行监听这种响应式的实现方式只能拦截某一个属性的修改这也是Vue3中ref的实现在下面代码中拦截了count的value属性并且拦截了set操作也能实现了类似的功能。
let getDouble n n * 2
let _value 1
double getDouble(_value)let count {get value() {return _value},set value(val) {_value valdouble getDouble(_value)}
}
console.log(count.value,double)
count.value 2
console.log(count.value,double) 三种实现原理的对比
实现原理definePropertyProxyvalue setter实际场景Vue2响应式Vue3 reactiveVue3 ref优势兼容性基于Proxy实现真正的拦截实现简单劣势数组和属性删除等拦截不了兼容不了IE11只拦截了value属性实际应用Vue2Vue3复杂数据结构Vue3简单数据结构
