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

简介: > 这是 Weex Tips 系列文章中的一篇,汇总目录在 [这里](http://www.atatech.org/articles/61714)。 + 首先建议先看一下有关组件定义的[官方文档](http://alibaba.github.io/weex/doc/references/component-defs.html),其中介绍了生命周期。 + 在 Weex 项目里有个 [

这是 Weex Tips 系列文章中的一篇,汇总目录在 这里

  • 首先建议先看一下有关组件定义的官方文档,其中介绍了生命周期。
  • 在 Weex 项目里有个 issue 专门描述了 Weex 的生命周期,里面有几张很清晰的图,我这里只讲一下用法。
  • 如果想了解组件的编译细节可以参考:《详解 Weex JS Framework 的编译过程》

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

Weex Lifecircle

注:在新版本的 JS Framework(>0.15.6)中才支持 destroyed 生命周期。

生命周期的用法

<script>
  module.exports = {
    data: {},
    methods: {},

    init: function () {
      console.log('在初始化内部变量,并且添加了事件功能后被触发');
    },
    created: function () {
      console.log('完成数据绑定之后,模板编译之前被触发');
    },
    ready: function () {
      console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
    },
    destroyed: function () {
      console.log('在页面被销毁时调用');
    }
  }
</script>

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

除此之外,不建议在根对象上定义其他属性,数据应该放在 data 属性中,自定义的方法放在 methods 中,方法的执行环境(this)是当前组件对应的 Vm 对象,接口参考:Instance Apis

init

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

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

created

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

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

ready

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

Weex Multi-component Lifecircle

此时可以通过 this.$el(id) 获取到节点的 Virtual-DOM,也可以通过 this.$vm(id) 获取到子组件的 Vm 实例。

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

module.exports = {
  data: {
    count: 0
  },
  ready: function () {
    var count = this.count;
    for (var i = 0; i < 999; i++) {
      count += Math.random();
    }
    this.count = count;
  }
}

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

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

destroyed

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

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

其他建议

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

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

目录
相关文章
|
3月前
|
移动开发 Dart 前端开发
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
深度分析:React Native、Flutter、UniApp、Taro、Vue的差异
269 6
|
4月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
63 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
4月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
333 2
|
12月前
|
数据库 容器
Flutter笔记:无限滚动与动态加载的实现
在 Flutter 中,实现一个无尽滚动列表通常涉及使用 ListView、ListView.builder 或 ListView.separated 组件,并结合数据源和滚动控制器。这使得你可以加载和显示大量数据,只有在需要时才会动态加
243 0
|
JavaScript
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
148 0
|
weex-ui 移动开发 JavaScript
weex开发-使用weex-ui绑定事件源注意事项
weex开发-使用weex-ui绑定事件源注意事项
139 0
weex-安装weex-toolkit一直失败的问题
weex-安装weex-toolkit一直失败的问题
262 0
|
移动开发 weex 网络安全
weex在运行上遇到的坑
weex在运行上遇到的坑
210 0
|
移动开发
ReactNative入门教程-组件生命周期函数
ReactNative入门教程-组件生命周期函数
95 0
ReactNative入门教程-组件生命周期函数
FLutter入门:异步加载组件FutureBuilder
FutureBuilder 在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍的,这时候我们一般会显示loading直到加载完成显示正常页面。在flutter中我们可以在initState中发起异步请求,然后将请求结果赋值给data,并setState刷新页面,在build中可以这样实现
363 0