生命周期

生命周期

开始

在 Ale 中，一个组件共有六种生命状态，分别对应着它们的同名生命周期函数：

using（组件被使用时）
mounting（组件被插入真实 DOM 时）
unmounting（组件移出真实 DOM 时）
rendering（组件被渲染时）
updating（组件更新时）
destroy（组件被销毁时）
你可以在定义组件时添加一个名为 life 的属性，并在 life 属性里添加函数：

Ale("test", {
    template: "test",
    life: {
        /* 这里添加life属性，需要为object */
        /* 添加using函数，当组件被使用时触发 */
        using: function(){
            alert("using!");
        }
    }
})

高级

除了 using 函数，其他的函数都将自动绑定 Ale 组件对象。如果你需要更改 data，请使用 this.data 这种形式更改：

Ale("test", {
    template: "test",
    life: {
        /* 这里添加life属性，需要为object */
        /* 添加rendering函数，当组件被渲染时触发 */
        rendering: function(){
            console.log(this.data); /* 打印data */
        }
    }
})

在线实例

让我们来制作一个定时器，输出当前时间，每秒更新一次：

Ale("timer", {
    template: function(){
        return "Now Time: " + this.time
    },
    data: {
        time: new Date().toLocaleTimeString()
    },
    life: {
        mounting: function(){
            /* 这里需要使用箭头函数，因为不会绑定 this */
            this.timer = setInterval(() => {
                this.data.time = new Date().toLocaleTimeString();
            }, 1000);
        },
        unmounting: function(){
            clearInterval(this.timer);
        }
    }
})

Ale.render("timer", {
    el: "#app"
})

上方定时器不会应用 Ale 内置的 diff 算法，因为你需要将不需要更新的元素用 DOM 标签包裹起来：

template: function(){
    return "<span>Now Time: </span>" + this.time
}

现在你可以打开控制台，对比一下这两个实例 DOM 的刷新，你会发现这个实例的 Now Time: 并没有更新。

原文: https://cn.alejs.org/2018/12/01/ComponentLife