前言

本文记录uniapp实际开发中遇到的坑

生命周期

页面生命周期

函数名 说明
onInit 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载

组件生命周期

函数名 说明
beforeCreate 在实例初始化之后被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

1、beforeCreate表示实例初始化之后被调用,此时在引入的组件中无法获取被引入组件的data数据和方法

2、created表示实例初始化完成后被调用,此时在引入的组件中可以获取被引入组件的data数据和方法。所以一般在created中进行数据的初始化。

3、beforeMount:在挂载开始之前被调用,即组件还没有被挂载,即组件还没有被渲染到页面上。给标签一个id名称,在beforeMount函数中通过document.getElementById('myView')访问该dom元素,注意只能在H5浏览器中测试,因为小程序中没有document对象,由于组件还没有挂载,故再引入组件的vue文件中无法获取该dom元素。document.getElementById('myView')值为null,表示组件还没有渲染到页面上。

4、mounted:挂载到实例上去之后调用,组件已经渲染到页面上。此时可以获取dom元素。所以,以后要想操作dom元素就在mounted中操作dom元素。

5、beforeUpdate和updated只有H5才支持。

6、beforeDestroy组件还没有销毁,destroyed表示组件已经销毁了。怎么才能让被引入的组件销毁呢?可以在引入组件的vue文件中给组件添加v-if,当v-if的值由true改为false时,组件被移除或者根本不在组件中创建出来,即被销毁了。可以在destroyed中清楚定时器。在created中添加一个定时器,即使定时器被销毁了,组件都被销毁了那么定时器就没有什么意义了,但是定时器仍然在执行,所以可以在destroyed中清楚定时器。

区分:页面的生命周期函数以on开头,组件的生命周期函数不以on开头。

页面生命周期与组件生命周期的关系

一开始子组件们先开始实例化

子组件们:beforeCreate->created->beforeMount

子组件实例化后(挂载前)页面开始加载,在onShow阶段子组件开始挂载

页面:onLoad->onShow->子 mounted->onReady

打包

报错

this.getOptions is not a function

卸载node-sa***node-sass@5.0.0和sass-loader@10.1.1

H5端注意事项

manifest.json要改为下面代码才能访问静态资源

  "h5": {
      "publicPath": "./"
  }

官方文档收录

  • 页面跳转使用API方式(uni.)
  • <template>替代<block>
  • 长列表优化示例
  • 如需要左右滑动的长列表,请在HBuilderX新建uni-app项目选新闻模板,那是一个标杆实现。自己用swiper和scroll-view做很容易引发性能问题
  • 尽量减少组件数量
  • 减少 scroll-view 组件的 scroll 事件监听,当监听 scroll-view 的滚动事件时,视图层会频繁的向逻辑层发送数据
  • 监听 scroll-view 组件的滚动事件时,不要实时的改变 scroll-top/scroll-left 属性,因为监听滚动时,视图层向逻辑层通讯,改变 scroll-top/scroll-left 时,逻辑层又向视图层通讯,这样就可能造成通讯卡顿
  • 注意 onPageScroll 的使用,onPageScroll 进行监听时,视图层会频繁的向逻辑层发送数据
  • 原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用。