Lifecycle

Lifecycle method When it gets called
install before the component gets mounted to the DOM
installed after the component gets mounted to the DOM
uninstall prior to removal from the DOM
beforeUpdate before update
afterUpdate after update (deprecated)
updated after update
beforeRender before render()
receiveProps parent element re-render will trigger it

For example:

  1. import { render, WeElement, define } from 'omi'
  3. define('my-timer', class extends WeElement {
  4.   static observe = true
  6.   data = {
  7.     seconds: 0
  8.   }
  10.   tick() {
  11.     this.data.seconds++
  12.   }
  14.   install() {
  15.     this.interval = setInterval(() => this.tick(), 1000)
  16.   }
  18.   uninstall() {
  19.     clearInterval(this.interval)
  20.   }
  22.   render() {
  23.     return <div>Seconds: {this.data.seconds}</div>
  24.   }
  25. })
  27. render(<my-timer />, 'body')