天天看点

[Weex Tips] 合理使用 Weex 的生命周期

如果看完了上边的链接,对 weex 生命周期的理解应该很到位了,可以简单总结成这么一张图:

[Weex Tips] 合理使用 Weex 的生命周期
注:在新版本的 js framework(&gt;0.15.6)中才支持 <code>destroyed</code> 生命周期。

注意这几个生命周期函数 <code>init</code> 、<code>created</code> 、<code>ready</code> 、<code>destroyed</code> 和 <code>data</code> 、<code>methods</code> 属性是平级的,不要将其放在 <code>methods</code> 中,虽然当前版本兼容这种用法,以后也有可能会放弃支持。

在 <code>init</code> 方法执行时,刚初始化了内部变量,添加了事件的功能。此时还没有执行数据绑定,也没有创建 virtual-dom ,所以不能通过 <code>this</code> 获取到 <code>data</code> 中的数据,不能调用到 <code>methods</code> 中定义的方法,也不能获取到 virtual-dom 的节点。

可以在这个方法中可以初始化一些内部变量,也可以绑定一些自定义的事件。

<code>created</code> 的名称有点令人迷惑,会让人以为节点全部都创建完成了,其实只是刚完成了数据绑定,还没开始编译模板。此时可以通过 <code>this</code> 操作 <code>data</code> 中的数据,也可以调用 <code>methods</code> 中的方法,但是获取不到 virtual-dom 的节点。

由于还没开始执行节点的渲染,可以在 <code>created</code> 方法中修改 <code>data</code> 中的数据(例如某些需要动态计算的属性),此时的修改不会触发额外的渲染。

<code>ready</code> 开始执行时,表示当前组件已经渲染完成。这个过程是自底向上触发的,会首先先执行子组件的 <code>ready</code> 方法。也就是说,在父组件执行 <code>ready</code> 时,所有子组件都已经渲染完成,而且已经执行完各自的 <code>ready</code> 方法。

[Weex Tips] 合理使用 Weex 的生命周期

此时可以通过 <code>this.$el(id)</code> 获取到节点的 virtual-dom,也可以通过 <code>this.$vm(id)</code> 获取到子组件的 vm 实例。

不过,在 <code>ready</code> 方法中要小心地操作 <code>data</code> 中的数据,避免频繁赋值,因为此时已经完成了数据和 ui 的绑定,每次修改值都可能触发局部页面重新渲染。建议先取出需要频繁改动的值,然后等操作执行结束后,再一并赋值:

如代码所示,在修改 <code>this.count</code> 前先获取它的值,在执行完操作后再赋值回去,如果在循环体中直接设置 <code>this.count</code> 的值,页面将触发 999 次局部刷新,很可能会导致页面卡顿。

对于复杂的数据对象,也建议用 取值 -&gt; 修改 -&gt; 赋值 的方式更新数据。

<code>destroyed</code> 方法将在组件销毁(通常是页面跳转)时被调用。和 <code>ready</code> 类似,它也是自底向上执行,先触发子组件的 <code>destroyed</code> 方法,再触发自身。而且框架会先执行开发者定义的 <code>destroyed</code> 方法,然后再清除内部属性。

如果添加了一些属性到全局或者 this 上,建议在 <code>destroyed</code> 方法中手动清除,避免内存泄漏。

无论在何时,都不建议获取 vm 和 virtual-dom 内部属性,这部分数据对开发者是透明的,而且在版本迭代过程中很可能会修改。

如果有特殊开发需求,建议联系 weex 开发组的同学讨论解决方法。

继续阅读