Skip to content

嵌套 update 应该阻止并抛出错误,以及未来集成zone.js的设想 #63

@leeluolee

Description

@leeluolee

其实 regularjs 的$update 和 angularjs 的$apply 类似, 但是之前regularjs一直允许 在 一次脏检查周期中允许另外一此$update, 这可能导致一些性能上的损耗。

<input ref='xx' value={name}>
<div  on-click={this.change()}> change</div>

var component = Regular.extend({
  change: function(){
    this.data.name = Math.random();
    this.$update(); // 原版本是允许的, 并且会被同步到view中.
    this.$refs.xx.value === this.data.name // true
  }
}) 

0.4.2版本处理了这个情况,即不允许这种尝试, 即此时你去从dom获取xx.value 发现与this.data.name并不一致, 这是因为regularjs主动的禁止了这种行为。这种措施本来应该没有问题, 但是问题就是之前版本是允许这种行为, 但0.4.2版本时,却静默的阻止了, 这将导致开发者产生迷惑

所以与田翔同学讨论了许久后, 决定与angularjs一致, 如果你在更新周期内又调用了另外一次$update, regularjs会主动抛出一个错误来进行提示。

这个更新除了可以让我们不必要的脏检查更少之外, 还有一个巨大的优势就是为未来引入zone.js 做铺垫(解决$update的方案之一, 另一个方案是常规的Object.defineProperty). 可以查看下

code pen的DEMO

  var Component = Regular.extend({
    template: `
      <button on-click={this.show()} >start</button>
      <button on-click={this.end()} >end</button>
      <div> {num} </div>
    `,
    config: function(){
      this.data.num = 1000;
    },
    show: function(title){
      var data = this.data;

      this.tid = setInterval(function(){
        data.num = Math.random()
      },100)

    },

    end: function(){
      clearInterval(this.tid)
    }
  })

我们发现,神奇的不需要$update, 但是setInterval回调的数据改动, 仍然可以进行更新到view. 当然这仍然是脏检查, 只是框架接管了你手动调用$update的可能

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions