数据响应式

news2024/11/13 12:20:02

响应式原理

课堂主题

1.利用defineProperty实现数据劫持
2.利用ES6中proxy实现数据劫持
3.实现数据驱动视图更新，实现数据响应
4.发布订阅模式

知识点

defineProperty；
Proxy代理
数据劫持
发布订阅
观察者模式与发布订阅
数据响应式

defineProperty

Object.defineProperty(obj,'name',{
        get(){
            return value;
        },
        set(newValue){
            console.log("set...");
            value = newValue;
        }
    })

Proxy

定义：对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

基本使用

let obj = new Proxy({
                    name: "张三",
                    age: 20
              },{
                    get(target, name) {
                        return target[name];
                    },
                    set(target,name,value){
                        target[name] = value;
                    }
               })

通过数据劫持实现表达式

通过defineProperty劫持数据:observer

##发布订阅监听数据的更新

通过自定义事件触发更新
通过发布订阅模式触发更新

实现指令

输入框赋值
监听输入事件

观察者模式

定义一个对象与其他对象之间的一种依赖关系，当对象发生某种变化的时候，依赖它的其它对象都会得到更新，一对多的关系。

发布订阅模式

发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。
在这里插入图片描述