1. 首页

vue早期源码学习系列之六:如何实现计算属性

前言

vue中有一个非常好用的功能:计算属性(computed)

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。

来源:https://vuejs.org.cn/guide/computed.html

问题

我们先来具象化一下问题。

// html
<div id="app">
    <p>姓名:{{user.name}}</p>
    <p>年龄: {{user.age}}</p>
    <p>{{info}}</p>
</div>
// js
const app = new Bue({
    el: '#app',
    data: {
        user: {
            name: 'youngwind',
            age: 24
        }
    },
    computed: {
        info: function () {
            return `计算出来的属性-姓名: ${this.user.name}, 年龄: ${this.user.age}`;
        }
    }
});

问题是:如何让info跟着name和age动态改变呢?

我们把这个问题拆解成两个更小的问题,然后逐个击破。

  1. 如何根据name和age计算出info?
  2. 当name或者age改变的时候,重新进行第一步的计算。

静态计算属性

ok,我们先来解决第一个问题。(先把第二个问题放一边)

/**
 * 初始化所有计算属性
 * 主要完成一个功能:将计算属性定义的function当成是该属性的getter函数
 * @private
 */
exports._initComputed = function () {
    // 注意,这里的this指的是bue实例
    let computed = this.$options.computed;
    if (!computed) return;
    for (let key in computed) {
        let def = computed[key];
        if (typeof def === 'function') {
            def = {
                get: def
            };
            def.enumerable = true;
            def.configurable = true;
            Object.defineProperty(this.$data, key, def);
        }
    }
};

关键点说明:

  1. info后面跟的是一个有return值的函数,我们直接把这个函数当成info的getter函数。
  2. 虽然info是计算出来的属性,但是到时候对DOM模板进行遍历的时候也是需要用到它的,所以需要将info定义到$data里面去。

实现效果如下图所示。
bug

从图中我们可以看到,$data里面的info已经有值,并且DOM模板里面的{{info}}也已经正确解析了。
第一个问题解决了,但是,我们同时也看到,当我们改变name和age的时候,info并不会跟着改变!!
下面我们来看看怎么解决这第二个问题。

动态计算属性

动态计算难在什么地方?
难在:当name或者age改变的时候,程序如何知道要改变info?
你可能会说,这不明摆着吗,一眼就看出来。
然而,程序不知道啊!我们拆解一下问题。

  1. 如何让程序知道info依赖于name和age。-如何收集计算属性的依赖属性
  2. 当name和age改变的时候,更新info对应的DOM元素

第2个问题好办,因为我们在《如何实现动态数据绑定》 #87 的时候就已经建立起一套完整的Binding、Watcher和Directive的体系。我们只需要把info指令分别push到wathcer name和wathcer age的_subs里面不就可以了,在这儿就不细说了。
我们重点看第一个问题。
解决思路还是从getter入手:定义info的function被当成了getter,那么当我们访问this.$data.info的时候,就会调用这个function。这个function又会去访问this.user.name和this.user.age,这意味着什么呢?
这意味着会去执行name和age的getter函数啊!所以我们可以自定义name和age的getter函数,让它做一些特殊的事情。
那要做什么事情呢?我们触发(notify)一个get事件,然后这个get事件会传播到$data顶层。我们在$data顶层注册一个colletDep(收集依赖)函数,这样我们不就能知道info依赖于user.name和user.age了吗?
嗯,没错,大概思路就是这样。下面展示部分关键代码,完整的代码可以参考这里

function Watcher(vm, expression, cb, ctx) {
    this.id = ++uid;
    this.vm = vm;
    this.expression = expression;
    this.cb = cb;
    this.ctx = ctx || vm;
    this.deps = Object.create(null);

    // 这里的getter可以不去细究,其实就是根据expression(比如user.name)
    // 拼接出它对应的函数,当成getter
    // 你完全可以理解为调用this.getter()方法其实就是为了得到user.name的值
    this.getter = expParser.compileGetter(expression);

    this.initDeps(expression);
}
/**
 * 要注意,这里的getter.call是完成计算属性的核心,
 * 因为正是这里的getter.call, 执行了该计算属性的getter方法,
 * 从而执行该计算属性所依赖的其他属性的get方法
 * 从而发出get事件,冒泡到底层, 触发collectDep事件
 * @param path {String} 指令表达式对应的路径, 例如: "user.name"
 */
Watcher.prototype.initDeps = function (path) {
    this.addDep(path);
    Observer.emitGet = true;
    this.vm._activeWatcher = this;

    // 就是在这儿调用info的getter,进而调用name和age的getter
    // 进入触发和传播get事件
    this.value = this.getter.call(this.vm, this.vm.$data);

    Observer.emitGet = false;
    this.vm._activeWatcher = null;
};
/**
 * 收集依赖。
 * 为什么需要这个东西呢?
 * 因为在实现computed计算属性功能的过程中,
 * 发现程序需要知晓计算出来的属性到底依赖于哪些原先就有的属性
 * 这样才能做到在对应原有的属性的_subs数组中添加新属性指令的watcher事件
 * @param path {String} get事件传播到顶层时的路径,比如"user.name"
 * @private
 */
exports._collectDep = function (event, path) {
    let watcher = this._activeWatcher;
    if (watcher) {
        watcher.addDep(path);
    }
};

// 看,就是在这儿给$data顶层注册收集依赖的事件的
this.observer.on('set', this._updateBindingAt.bind(this))
        .on('get', this._collectDep.bind(this));

有两个小细节务必要注意:

  1. Observer构造函数有一个emitGet属性,默认为false。当emitGet为true时,代表调用属性的getter会触发并且传播get事件,当emitGet为false时,则不会触发。只有在初始化构造Binding才将它开启,因为不能任意时候调用属性getter都触发这个get事件,这个get事件只是我们在收集依赖才需要的。
  2. Watcher实例有一个dep字段,它的作用是为了避免重复收集依赖。如果没有他,那么在当前例子的情况下,user的bingding._subs里面会出现两个user的watcher,name亦然。原因是我们在计算属性的时候再次读取了user和name。为了避免这种情况,需要引入dep,记录下:“哦,原来程序刚刚已经分析过这里了,忽略就好。”

最后构造出来的_rootBinding数据结构如下图所示。
data

具体的实现效果如下图所示,完整的代码参考这里
demo

—EOF—

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:vue早期源码学习系列之六:如何实现计算属性

链接:https://www.javascriptc.com/1426.html

原文链接:https://github.com/youngwind/blog/issues/89

« 前端工程
vue早期源码学习系列之五:批处理更新DOM»
Flutter 中文教程资源

相关推荐

QR code