渲染周期

从创建元素到完成渲染会经历数据变化、请求渲染、布局、渲染等一系列过程，从而形成一次完整的渲染生命周期。

示例

生命周期中的不同状态会通过 ChildEvent、 PropertyEvent、 WatchEvent、 LayoutEvent、 RenderEvent等事件进行通知，你也可以通过 Leafer 实例监听这些事件实现自己的产品逻辑。

监听渲染事件

import { Leafer, Rect, RenderEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(RenderEvent.BEFORE, function () {
    // render before (Layout has ended)
})

恭喜 🎉

你已完成快速入门知识的学习，可以开始用 LeaferJS 来探索产品开发了～

可继续阅读

🍉 了解应用、元素、属性方法、事件、类库的使用。

🍊 了解让你事半功倍的官方、社区 插件。

在前端环境中使用

Vue

React

在服务端渲染中使用

Nuxt.js

VitePress

Next.js