VUE 是如何监测数据改变的?

 首先这是我们需要监测的数据

data = {
           name: "NEMO",
           age: "18"
        }

我们定义一个观察者类

function Observer(obj) {
            const keys = Object.keys(obj)
            keys.forEach((k) => {
                Object.defineProperty(this, k, {
                    get() {
                        return obj[k]
                    },
                    set(val) {
                        obj[k] = val
                        console.log("数据修改了!")
                    }
                })
            })
        }
const observer = new Observer(data)

这个类遍历出obj(也就是data)的所有属性,再赋予到自己身上,但读取是对 data 进行操作。代理的思想。

const vm = {}
vm._data = data = observer

这样,我们控制台修改 vm._data.name="MJBB" 的时候,就会输出“数据修改了!”

猜你喜欢

转载自blog.csdn.net/qq_42817985/article/details/125874332