mobx @computed的解讀

 

寫在前面：我一開始看不懂官網的@computed的做用，由於即便我把@computed去掉，依然能正確的report，而後我百度谷歌都找不到答案，下面都是我本身的理解，若是是有問題的，不對的，請務必留言幫我指出。

官網dome：

import React, { Component } from 'react';
import mobx, {observable, computed } from 'mobx';

class ObservableTodoStore {
    @observable todos = [];
    @observable pendingRequests = 0;

    constructor() {
        mobx.autorun(() => console.log(this.report));
    }
　　
　　// get completedTodosCount()
    @computed get completedTodosCount() {
       console.log('completed')
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }

    @computed get report() {
        console.log('report');
        if (this.todos.length === 0)
            return "<none>";
        return `Next todo: "${this.todos[0].task}". ` + 
            `Progress: ${this.completedTodosCount}/${this.todos.length}`; 
    }

    addTodo(task) {
        this.todos.push({ 
            task: task,
            completed: false,
            assignee: null
        });
    }
}
const observableTodoStore = new ObservableTodoStore();

observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].task = "grok MobX tutorial";

運行結果：

 

 

個人發現：

　　請留意第三行，改變了completed，先執行的函數回事completedTodosCount(),

　　第五行，只改變todos的task屬性，完成進度沒有改變，completedTodosCount()根本就不執行，

　　若把completedTodosCount的@computed去掉，則每次console report後都緊接着console completed；

　　因此我獲得了下面的結論

    // completedTodosCount 原本只是一個變量,由於使用了getter/setter,在該變量get/set的時候會執行函數,
    // report函數get了沒有使用@computed的completedTodosCount，因此每一次get都會執行getter函數（getter函數只是一個普通的getter函數），
    // 若使用了@computed， 每當你調用completedTodosCount時，
    // @computed會先判斷getter函數裏面的依賴是否發生改變，選擇性執行getter函數，或者使用以前的值

 　　討論羣，大大的回答

　　討論的結論：

　　completedTodosCount也跟observable同樣是一個被監聽的值，只是他是從observable數據中導出來的，除此以外跟observable是同樣同樣的

 

 至此：因爲沒有找到官方一點的解釋，這個結論是我本身的結論。若是是有問題的，請留言幫我指出來。拜託了。