vue源码学习：Object.defineProperty 对象属性监听

teren 发布于2019-08-22 17:31 / 1750人阅读

摘要：参考版本源码版本相关实现双向数据绑定的关键是，让我们先来看下这个函数。我们可能会有对象中属性的值还是对象这种嵌套情况，可以通过递归解决在源代码文件中观察者构造函数通过过滤掉一个对象本身拥有的属性递归调用循环所有对象出来被访问被修改，新被访问

参考版本 vue源码版本：0.11
相关

vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。

在MDN上查看有关 Object.defineProperty 的解释。

我们先从最简单的开始：

let a = {"b": 1};
Object.defineProperty(a, "b", {
    enumerable: false,
    configurable: false,
    get: function(){
        console.log("b" + "被访问");
    },
    set: function(newVal){
        console.log("b" + "被修改，新" + "b" + "=" + newVal);
    }
});

a.b = 2;   // b被修改，新b=2
a.b;       // b被访问

这样，我们就能监听对象了！但问题并不仅仅这么简单。。。

我们可能会有对象中属性的值还是对象这种嵌套情况，可以通过递归解决！

在vue源代码文件 srcobserveobserver.js 中

// 观察者构造函数
function Observer(data){
    this.data = data;
    this.walk(data);
}

let p = Observer.prototype;

p.walk = function(obj){
    let val;
    for(let key in obj){
        // 通过 hasOwnProperty 过滤掉一个对象本身拥有的属性 
        if(obj.hasOwnProperty(key)){
            val = obj[key];
            // 递归调用 循环所有对象出来
            if(typeof val === "object"){
                new Observer(val);
            }
            this.convert(key, val);
        }
    }
};

p.convert = function(key, val){
    Object.defineProperty(this.data, key, {
        enumerable: false,
        configurable: false,
        get: function(){
            console.log(key + "被访问");
        },
        set: function(newVal){
            console.log(key + "被修改，新" + key + "=" + newVal);
            if(newVal === val) return ;
            val = newVal;
        }
    })
};

let data = {
    user: {
        name: "zhangsan",
        age: 14
    },
    address: {
        city: "beijing"
    }
}

let app = new Observer(data);

data.user.name;    // user被访问

云服务器 GPU云服务器 vue实例属性 vue.js 属性 vue的计算属性 vue源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95249.html

vue源码学习：Object.defineProperty 对数组监听

摘要：对于框架如何实现数组变化的监测，大多数情况下，框架会重写方法，并生成一个新的数组赋值给数据，这样数据双向绑定就会触发。实现简单的对数组的变化的监听指向可通过下面的测试看出通过输出，可以看出上面所述指向的是在官方文档，所需监视的只有种方法。上一篇中，我们介绍了一下defineProperty 对对象的监听，这一篇我们看下defineProperty 对数组的监听数组的变化先让我们了解...

CatalpaFlat 2019-08-26 11:54 评论0 收藏0
JavaScript 进阶之深入理解数据双向绑定

摘要：当我们的视图和数据任何一方发生变化的时候，我们希望能够通知对方也更新，这就是所谓的数据双向绑定。返回值返回传入函数的对象，即第一个参数该方法重点是描述，对象里目前存在的属性描述符有两种主要形式数据描述符和存取描述符。前言谈起当前前端最热门的 js 框架，必少不了 Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后使用的基本原理往往关注...

sarva 2019-08-20 18:28 评论0 收藏0
用vue框架的基本原理，简单实现一个todo-list

摘要：前言最近在学习框架的基本原理，看了一些技术博客以及一些对源码的简单实现，对数据代理数据劫持模板解析变异数组方法双向绑定有了更深的理解。前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成...

Karrdy 2019-08-20 18:31 评论0 收藏0
Vue源码学习（二）——从宏观看Vue

摘要：上一篇文章我们写到从入口文件一步步找到的构造函数，现在我们要去看看实例化经历的过程的构造函数我们知道的构造函数在中不明白的可以去看上一篇文章源码学习笔记一。上一篇文章我们写到从入口文件一步步找到Vue的构造函数，现在我们要去看看Vue实例化经历的过程 Vue的构造函数我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 评论0 收藏0
Vue双向绑定原理，教你一步一步实现双向绑定

摘要：储存订阅器因为属性被监听，这一步会执行监听器里的方法这一步我们把也给弄了出来，到这一步我们已经实现了一个简单的双向绑定了，我们可以尝试把两者结合起来看下效果。总结本文主要是对双向绑定原理的学习与实现。当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，...

Labradors 2019-08-23 12:31 评论0 收藏0