-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
监听一个变量的变化,需要怎么做 #92
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
监听一个变量的变化,当变量变化时执行某些操作,这类似现在流行的前端框架(例如 React、Vue等)中的数据绑定功能,在数据更新时自动更新 DOM 渲染,那么如何实现数据绑定喃?
本文给出两种思路:
ES5 的 Object.defineProperty
其中:
obj
: 要定义属性的对象prop
:要定义或修改的属性的名称或Symbol
descriptor
:要定义或修改的属性描述符如果是完整的对变量的每一个子属性进行监听:
通过
map
遍历,通过深度递归监听子子属性注意,
Object.defineProperty
拥有以下缺陷:length
(Object.defineProperty
不能监听数组的长度),以及数组的push
等变异方法是无法触发setter
的对此,我们看一下 vue2.x 是如何解决这块的?
vue2.x 中如何监测数组变化
使用了函数劫持的方式,重写了数组的方法,Vue 将 data 中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组 api 时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。
对于数组而言,Vue 内部重写了以下函数实现派发更新
vue2.x 怎么解决给对象新增属性不会触发组件重新渲染的问题
受现代 JavaScript 的限制 (
Object.observe
已被废弃),Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行
getter/setter
转化,所以属性必须在data
对象上存在才能让Vue
将它转换为响应式的。对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
vm.$set()实现原理
splice
实现响应式target
本身就不是响应式,直接赋值defineReactive
方法进行响应式处理ES6 的 Proxy
众所周知,尤大大的 vue3.0 版本用
Proxy
代替了defineProperty
来实现数据绑定,因为Proxy
可以直接监听对象和数组的变化,并且有多达13
种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。Proxy
其中:
target
:要使用Proxy
包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)handler
:一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p
的行为上面提到过
Proxy
总共提供了13
种拦截行为,分别是:getPrototypeOf
/setPrototypeOf
isExtensible
/preventExtensions
ownKeys
/getOwnPropertyDescriptor
defineProperty
/deleteProperty
get
/set
/has
apply
/construct
感兴趣的可以查看 MDN ,一一尝试一下,这里不再赘述
另外考虑两个问题:
Vue3 Proxy
对于第一个问题,我们可以判断当前
Reflect.get
的返回值是否为Object
,如果是则再通过reactive
方法做代理, 这样就实现了深度观测。对于第二个问题,我们可以判断是否是
hasOwProperty
下面我们自己写个案例,通过proxy 自定义获取、增加、删除等行为
总结
Proxy 相比于 defineProperty 的优势:
Proxy
和Reflect
,可以原生监听数组,可以监听对象属性的添加和删除Reflect.get
的返回值是否为Object
,如果是则再通过reactive
方法做代理, 这样就实现了深度观测getter
时才对对象的下一层进行劫持(优化了性能)所以,建议使用
Proxy
监测变量变化参考
The text was updated successfully, but these errors were encountered: