安卓手机做服务器网站,福建省建设干部培训中心网站首页,全国电子商务公共服务网,python 如何做网站前言
Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层#xff1b;响应式的原理就是实现当数据更新时#xff0c;视图层也要相应的更新
响应式实现
基于发布订阅模式和数据劫持实现
1.发布订阅模式#xff1a;vue使用发布订阅模式来实现数据变动的通知和更新
2…前言
Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层响应式的原理就是实现当数据更新时视图层也要相应的更新
响应式实现
基于发布订阅模式和数据劫持实现
1.发布订阅模式vue使用发布订阅模式来实现数据变动的通知和更新
2.数据劫持vue通过object.defineProperty对数据进行劫持
Vue2响应式原理
基于js的object.defineProperty() 方法该方法可将传入的属性全部转为getter/setter
object.defineProperty() 实现数据拦截是再数据被访问和被修改的时候进行拦截
1.数据劫持vue2的data部分会被object.defineProperty()传入并转成getter/setter便于追踪属性的变化在属性被修改的时候执行相应的操作
2.依赖追踪vue中有一个依赖收集系统每一个响应式数据都会有一个依赖集合当访问到该数据的时候会把当前的watcher记录下来后续数据发生变化的时候依赖于这个数据的watcher会被通知去更新相应的视图
3.派发更新当响应式数据变化的时候vue会遍历依赖集合通知相应的watcher更新视图
Object.defineProperty
为什么vue3要使用proxy而不是继续使用Object.defineProperty
1.兼容性问题一些旧版本浏览器不兼容
2.只能监听对象属性只能劫持对象的属性访问和修改操作无法监听对象的新增属性和删除属性的操作所以如果一个对象要新增属性需要使用vue.set()
3.无法监听数组的变化对于数组的增加删除和重排不会触发数组的属性变化从而也不会被拦截再vue中响应式处理需要使用pushpop()等方法去实现
4.性能开销对于大规模的data数据每个被劫持的对象都要有对应的getter和setter进行拦截和更新可能会影响到整体性能
Vue3响应式原理
Vue2使用ES5的Object.defineProperty() API对数据进行劫持并结合发布订阅模式实现双向数据绑定。而Vue3则使用ES6的Proxy API对数据进行代理从而进行双向数据绑定。使用Proxy API可以省去for in、闭包等内容来提升效率同时可以监听整个对象而不仅仅是某个属性。另外Proxy API还可以检测到数组内部数据的变化。
Proxy
1.可定制行为通过定义拦截器函数可以对对象的各种操作进行定制使得 Proxy 对象能够实现非常灵活的代理行为。 2.透明性Proxy 对象与原对象具有相同的外观和行为因此在代码中可以完全替代原对象而不会影响到代码的其他部分。 3.非侵入性Proxy 对象与原对象之间的代理关系是动态的可以随时添加或移除代理行为而不会影响到原对象。 4.更好的性能与 Object.defineProperty() 相比Proxy 的性能通常更好特别是在处理大规模数据和数组变化
区别
1.灵活性Proxy 提供了更加灵活和强大的拦截能力可以拦截对象的更多操作包括属性的读取、赋值、删除、枚举等以及数组的操作如 push、pop、shift、unshift 等。而 Object.defineProperty() 只能劫持对象的属性访问和修改操作无法直接监听数组的变化等 2.兼容性Proxy 在 ES6 中被引入因此对于支持 ES6 的现代浏览器和环境来说兼容性较好。但是在一些旧版本的浏览器中如 IE11 及更早版本Proxy 并不被支持。而 Object.defineProperty() 在较早的 ES5 中就已经存在兼容性较好但也存在一些兼容性问题如无法监听数组变化和对新增属性的处理等 3.性能Proxy 相对于 Object.defineProperty() 在性能上可能会有所提升特别是在处理大规模数据和数组变化时。Proxy 的拦截器函数在实现上更为底层因此可能更加高效。而 Object.defineProperty() 的性能开销相对较大特别是在属性较多时可能会影响到整体性能 4.监听对象的方式Proxy是通过创建一个目标对象的代理对象来实现监听的可以直接监听整个对象包括对象的属性新增、删除和修改等操作。而Object.defineProperty()是针对对象的每个属性进行劫持无法直接监听对象的整体变化
