对象的计算属性

klivitamJ 发布于2019-08-23 16:54 / 1787人阅读

var Dep = {
    target: null
};

function defineComputed(obj, key, computeFunc) {
    computeFunc = computeFunc.bind(obj);
    var value;
    Dep.target = function() {
        value = computeFunc();
    };
    value = computeFunc();
    Object.defineProperty(obj, key, {
        get: function() {
            return value;
        },
        set: function() {
            // don"t do anything. can"t set computed funcs
        }
    })
}
function defineReactive(obj, key, val) {
    // all computed properties that depend on this
    var deps = [];
    
    Object.defineProperty(obj, key, {
        get: function() {
            // Check if there"s a computed property which "invoked"
            // this getter. Also check that it"s already not a dependency
            if (Dep.target) {
                // add the dependency
                deps.push(Dep.target);
                Dep.target = null;
            }
            return val;
        },
        set: function(newValue) {
            if (val === newValue) return;
            val = newValue;
            
            // notify all dependent computed properties
            deps.forEach(func => func());
        }
    })
}

var obj = {};
defineReactive(obj, "a", 0);
defineReactive(obj, "c", 10);
defineComputed(obj, "b", function() {
    console.log(1);
    return this.a + this.c;
});


obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

obj.a += 1;

console.log(obj.b);

参考文档：
https://www.cnblogs.com/kidne...
https://skyronic.com/blog/vue...

云服务器混合云对象的属性匹配对象的属性和函数 js中集合对象的属性 js包装对象中的属性

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

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

Vue.js-计算属性和class与style绑定

摘要：每一个计算属性都包含一个和一个。使用计算属性的原因在于它的依赖缓存。及与绑定的主要用法是动态更新元素上的属性。测试文字当的表达式过长或逻辑复杂时，还可以绑定一个计算属性。学习笔记：前端开发文档计算属性所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。计算属性的用法在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终...

Shihira 2019-08-23 16:02 评论0 收藏0
【Vue计算属性】

摘要：计算属性语法在构造函数的参数对象中有一个属性，该属性就是用于定义计算属性的，该对象中的键也就是我们的计算属性，与不同的是，计算属性的键值是一个拥有返回值的函数，该函数中可以访问到中的所有属性。我们都知道在Vue构造函数的参数对象中有一个【data】属性，该属性值是一个对象，该对象是对数据的代理，是一个键值对并且时刻与页面表现是一致的，但是这里面只能是简单的键值对，不能拥有业务逻辑，并...

王陆宽 2019-08-20 18:31 评论0 收藏0
【Vue 2.0】核心源码解读 -- 不定期更新

摘要：观察员由模板解析指令创建的观察员负责模板中的更新视图操作。观察员种类目前了解情况来看主要分三类视图指令的计算属性的用户自定义的介绍关于 Vue.js 的原理一直以来都是一个话题。经过几天的源码学习和资料介绍，我将一些个人理解的经验给写下来，希望能够与大家共勉。附上GITHUB源码地址, 如果有任何不解可以在文章下面提出或者写下issue, 方便大家回答和学习, 有兴趣可以St...

sunsmell 2019-08-21 16:51 评论0 收藏0
Vue 数据响应式原理

摘要：接下来，我们就一起深入了解的数据响应式原理，搞清楚响应式的实现机制。回调函数只是打印出新的得到的新的值，由执行后生成。及异步更新相信读过前文，你应该对响应式原理有基本的认识。前言 Vue.js 的核心包括一套响应式系统。响应式，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。举个简单的例子，对于模板： {{ name ...

Mike617 2019-08-23 11:46 评论0 收藏0
浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

_Dreams 2019-08-29 16:40 评论0 收藏0
浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

xiangchaobin 2019-08-23 11:50 评论0 收藏0