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 = ?
,还有就是更深层次的监测,需要用到递归,日后为大家带来更有意思的代码

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

相关推荐
计算机软件程序设计14 分钟前
Vue中有什么组件可以实现轮播效果,每次出现四个元素?
前端·javascript·vue.js
GISer_Jing1 小时前
[本周五题]Javascript面试常考题&手撕&场景UR缓存、new关键字、大数相加、最长递增子序列、高并发请求、大文件上传和WebWorks
开发语言·javascript·面试
好_快1 小时前
Lodash源码阅读-baseIndexOf
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-indexOf
前端·javascript·源码阅读
积水成江1 小时前
【Vue3+Vite指南】全局引入SCSS文件后出现Undefined mixin?一招解决命名空间陷阱!
前端·vue.js·html5·scss
神秘代码行者2 小时前
使用 matchMedia API 实现响应式 JavaScript 开发教程
javascript
2401_853275732 小时前
vue里面使用什么组件和后端接口通讯
前端·javascript·vue.js
大叔_爱编程2 小时前
wx131基于ssm+vue+uniapp的智能停车场管理系统小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
计算机学姐4 小时前
基于Asp.net的物流配送管理系统
vue.js·后端·mysql·sqlserver·c#·asp.net·visual studio
非凡网站6 小时前
网页制作代码html制作一个网页模板
前端·javascript·html