元素生命周期

元素从创建、添加、挂载，到移除、解除挂载、销毁的全过程，可在初始化事件中监听。

示例

生命周期中的不同状态会通过 ChildEvent、 PropertyEvent 进行通知。

监听元素生命周期事件

初始化方式监听

// #监听元素生命周期事件 [通过 event 对象监听]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cornerRadius: [50, 80, 0, 80],
    draggable: true,
    event: {
        created() {
            console.log('rect created')
        },
        mounted: () => {
            console.log('mounted, leafer', rect.leafer) // 元素已挂载到 leafer 的树结构上，可以被渲染
        },
        unmounted() {
            console.log('unmounted')
        },
    }
})

leafer.add(rect)

通过 on 监听

// #监听元素生命周期事件 [通过 on 监听]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cornerRadius: [50, 80, 0, 80],
    draggable: true
})

leafer.add(rect)

rect.on('created', () => {
    console.log('rect created')
})

rect.on('mounted', () => {
    console.log('mounted, leafer', rect.leafer) // 元素已挂载到 leafer 的树结构上，可以被渲染
})

rect.on('unmounted', () => {
    console.log('unmounted')
})

下一步

引擎生命周期