Tick and NextTick

如果使用了observe，数据更改之后视图不是立即变更，如果你想获取真实变更后的dom，你可以使用tick或者nextTick。

import { render, WeElement, define, tick, nextTick } from 'omi'
define('todo-list', class extends WeElement {
  render(props) {
    return (
      <ul>
        {props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    )
  }
})
define('todo-app', class extends WeElement {
  static observe = true
  static get data() {
    return { items: [], text: '' }
  }
  install() {
    tick(() => {
      console.log('tick')
    })
    tick(() => {
      console.log('tick2')
    })
  }
  beforeRender() {
    nextTick(() => {
      console.log('nextTick')
    })
    // don't using tick in beforeRender or beforeUpdate or render or afterUpdate
    // tick(() => {
    //   console.log(Math.random())
    // })
  }
  installed() {
    console.log('installed')
  }
  render() {
    console.log('render')
    return (
      <div>
        <h3>TODO</h3>
        <todo-list items={this.data.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.data.text}
          />
          <button>Add #{this.data.items.length + 1}</button>
        </form>
      </div>
    )
  }
  handleChange = e => {
    this.data.text = e.target.value
  }
  handleSubmit = e => {
    e.preventDefault()
    if (!this.data.text.trim().length) {
      return
    }
    this.data.items.push({
      text: this.data.text,
      id: Date.now()
    })
    this.data.text = ''
  }
})
render(<todo-app />, 'body')

你也可以手动执行 this.update ，然后在它后面获取真实的 dom 。