Vue之监测数据的原理(对象)

大家有没有想过,为什么vue可以监测到数据发生改变?其实底层借助了Object.defineProperty ,底层有一个Observer的构造函数

让我为大家简单的介绍一下吧!

我用对象为大家演示一下

javascript 复制代码
    const vm = new Vue({
        el: "#app",
        data: {
            obj: {
                a: 1,
                b: 2
            }
        }
    })
    console.log(vm._data);

我们有没有办法,我们修改了数据,控制台提示我们修改了这个数据

我们不借助vue来实现一下吧!

javascript 复制代码
    let data = {
        a: 1,
        b: 2
    }
    // 创建一个监测data的实例化对象
    let obs = new Observer(data)
    // 准备一个vm实例对象
    let vm = {}
    vm._data = data = obs
    function Observer(obj) {
        // 汇总成一个数组
        let keys = Object.keys(obj)
        keys.forEach(k => {
            // this 指向实例化对象上
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    obj[k] = val
                    console.log(k + "被修改了");
                }
            })
        })
    }

这是不完善的,在vue的底层还有功能这里没有实现,就比如vue可以直接vm.a = ?
,还有就是更深层次的监测,需要用到递归,日后为大家带来更有意思的代码

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
苹果电脑的鑫鑫1 小时前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期2 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
一袋米扛几楼982 小时前
【Node】Node.js环境变量配置,及下载地址
javascript·网络·node.js
还是鼠鼠2 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
Moment2 小时前
前端性能指标 —— FMP
前端·javascript·面试