介绍功能观察(数据){
如果(!数据| | typeof数据!==& # 39;对象# 39;){
返回;
｝//取出所有属性遍历
种(数据).forEach(函数(关键){
defineReactive(数据、关键数据(关键));
}）;
};
函数defineReactive(数据、关键val) {
观察(val);//监听子属性
Object.defineProperty(数据、关键{
可列举的:真的,//可枚举
可配置://不假,能再重写defineProperty
得到:函数(){
返回val;
},
设置:函数(newVal) {
console.log(& # 39; - - - - - - -通知订阅者- - - - - - - - - - & # 39;)
val=newVal;
｝
}）;
} 功能观察(数据){
如果(!数据| | typeof数据!==& # 39;对象# 39;){
返回;
｝//取出所有属性遍历
种(数据).forEach(函数(_k) {//代理不允许绑定在非对象上
如果(数据(_k),,typeof数据[_k]===& # 39;对象# 39;){
数据[_k]=defineReactive(数据[_k]);
｝
}）;
｝
函数defineReactive(数据){
返回新代理(数据,{
集(目标、关键值,代理){//进行数组操作时,会进行两次设置一次数据改变,一次长度改变,两次改变数据的值是不变,因此不应该多分发一次消息
如果(
Object.prototype.toString.call(数据)===?对象数组)“;,,
键===發ength"
){
反映。集(目标、关键值,代理);
返回true;
｝
观察(数据);
反映。集(目标、关键值,代理);
console.log(& # 39; - - - - - - -通知订阅者- - - - - - - - - - & # 39;)
返回true;
｝
});
这篇文章给大家分享的是有关使用代理怎么实现双向绑定的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
前言:vue3.0要用代理来实现双向绑定,因此先来尝试一下实现方法。
<强> 1 Object.defineProperty实现
原来vue2的实现使用Object.defineProperty,监听,但对于数组直接下标给数组设置值监听不了。
<强> 2使用代理实现
使用代理实现原理主要的是新的一个代理对象,代理你的数据值,需要注意的一点是,对于数组的方法操作来说,会产生两次赋值操作,一次是添加值,一次是改变他的长度值,而对于Object.defineProperty监听不到的数组下标给数组设置值,代理是可以监听到的。
感谢各位的阅读!关于使用代理怎么实现双向绑定就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
