为什么我的 Ember Observer 在它所依赖的计算属性之前触发？答案

【问题标题】：Why is my Ember Observer firing before the computed property on which it depends?为什么我的 Ember Observer 在它所依赖的计算属性之前触发？
【发布时间】：2017-10-26 14:23:05
【问题描述】：

如果我有一个仅依赖于 CP（“父级”）的观察者（“子级”），那么子函数是否会在父级之前触发/运行？这似乎是我在更新父母所依赖的道具之一时所看到的......

更多细节：

观察者有.on('didInsertElement')
父 CP 被模板（间接）消耗
在初始渲染时，我看到 CP 函数首先运行，然后是观察者
当更新 CP 所依赖的一个 props 时，我看到观察者首先运行，然后是 CP

当我说父 CP 被模板“间接”消费时，我的意思是它实际上是在模板中直接消费的父 CP 的两个依赖 CP，而不是父 CP 本身。但是这两个函数都获取父 CP，所以我很确定应该具有相同的效果——父 CP 在初始渲染期间首先被消耗

这是一个有问题的组件的简化示例，希望可以制作这更清楚一点：

import Ember from 'ember';

 export default Ember.Component.extend({
  didInsertElement() {
    console.log('didInsertElement called');
  },
  didRender() {
    console.log('didRender called');
  },
  parentCP: Ember.computed('someOtherProp.[]', function() {
    console.log('called parentCP')
    return something;
  }),
  myObserver: function() {
    console.log('called observer');
    this.get('parentCP');
    // ... do something
  }.observes('parentCP').on('didInsertElement'),
  childCP1: Ember.computed('parentCP', function() {
    console.log('called child CP 1');
    this.get('parentCP');
    // ... compute
  }),
  childCP2: Ember.computed('parentCP', function() {
    console.log('called child CP 2');
    this.get('parentCP');
    // ... compute
  }),
});

这是初始渲染的顺序：

第一个子 CP 被调用
调用父级（大概是在子级获取它时）
第二个孩子被调用（并且似乎使用缓存的父 CP val）
父母火灾的观察者

（这基本上是我所期望的）

不过，当我向someOtherProp 添加一个元素时，序列如下所示：

父CP的观察者
父CP
儿童 CP 1
儿童 CP 2

这是预期的吗？特别是两件事：

无序的观察者射击真是令人惊讶
我原以为父 CP 和子 CP 的顺序与以前相同（即父 CP 直到其中一个子获取它时才会重新计算），但似乎它正在重新计算非懒洋洋的

（需要明确的是，#2 实际上并不那么令人惊讶，但并不是我认为 CP 的工作方式）

【问题讨论】：

标签： ember.js

【解决方案1】：

正如 Ember slack 中的 @locks 向我解释的那样：

这是意料之中的，因为观察者非常渴望：一旦他们的依赖项所依赖的 props 发生任何变化，他们就会触发

而且，因为在这种情况下观察者访问父 CP，它会导致它触发下一个。该结果被缓存，然后由两个子 CP 稍后使用

【讨论】：