美文网首页
Weex生命周期简介

Weex生命周期简介

作者: sunshinesuns | 来源:发表于2017-04-14 10:48 被阅读549次

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

created
created 的名称有点令人迷惑,会让人以为节点全部都创建完成了,其实只是刚完成了数据绑定,还没开始编译模板。此时可以通过 this 操作 data 中的数据,也可以调用 methods 中的方法,但是获取不到 Virtual-DOM 的节点。
由于还没开始执行节点的渲染,可以在 created 方法中修改 data 中的数据(例如某些需要动态计算的属性),此时的修改不会触发额外的渲染。

ready
ready 开始执行时,表示当前组件已经渲染完成。这个过程是自底向上触发的,会首先先执行子组件的 ready 方法。也就是说,在父组件执行 ready 时,所有子组件都已经渲染完成,而且已经执行完各自的 ready 方法。
此时可以通过 this.$el(id) 获取到节点的 Virtual-DOM,也可以通过 this.$vm(id) 获取到子组件的 Vm 实例

destroyed
destroyed 方法将在组件销毁(通常是页面跳转)时被调用。和 ready 类似,它也是自底向上执行,先触发子组件的 destroyed 方法,再触发自身。而且框架会先执行开发者定义的 destroyed 方法,然后再清除内部属性。
如果添加了一些属性到全局或者 this 上,建议在 destroyed 方法中手动清除,避免内存泄漏。

注意这几个生命周期函数 init 、created 、ready 、destroyed 和 data 、methods 属性是平级的

生命周期的方法

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

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

相关文章

  • Weex生命周期简介

    init在 init 方法执行时,刚初始化了内部变量,添加了事件的功能。此时还没有执行数据绑定,也没有创建 Vir...

  • weex LifeCycle

    weex的生命周期钩子不多, 所有的生命周期钩子都可以写在 标签中的对应的函数中

  • weex入门之开门篇

    weex简介 playground应用下载weex代码在线编辑工具 环境配置 node.js官网下载Sublime...

  • Weex 从入门到完整项目(1) 环境搭建

    Weex简介 weex 一个简单的介绍 阿里为了自己电商系APP 开发的一套快速迭代的混合开发框架,Weex 可...

  • 🐱[Weex] >> 简介

    【简介】 这是一篇综合性的Weex开发文集,不过由于本人从事iOS开发,所以在iOS方面有所侧重,另外,本文集将会...

  • WEEX

    简介 Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。 Weex 是阿里巴巴出的一款跨端框架,...

  • 各平台优缺点

    一、Weex 简介weex是阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架 特点 1.Ligh...

  • Android面试(一)Activity

    Activity简介 Activity生命周期 Activity任务栈 Activity起动 Activity简介...

  • Vue学习笔记-生命周期与钩子函数

    vue生命周期简介 生命周期探究 create 和 mounted 相关 beforecreated:el 和 d...

  • weex 环境搭建一 weex-toolkit

    weex开发, 安装nodejs 、weex-toolkit 、weex-pack weex官网文档:http:/...

网友评论

      本文标题:Weex生命周期简介

      本文链接:https://www.haomeiwen.com/subject/gyrwattx.html