uniapp生命周期和DOM

在官网的文件可以看到，uniapp的生命周期大致上和vue的相差无几，但是uniapp分成页面生命周期和应用生命周期，页面生命周期是应用于单个页面的，而应用生命周期则对应小程序和APP的。在现在的uniapp实际开发中，小程序的生命周期可以和vue的生命周期混合使用，但是不建议混合使用，容易造成混乱，组件中尽量规避使用原vue的生命周期。

另外，在初始化使用ref也要注意生命周期问题，在onload和show的钩子中，同步方法是拿不到$refs的，但是可以异步来使用，一般是加一个定时器或者放在请求之后使用。

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

需要注意的是：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

这里顺便提一下DOM：在created拿不到ref是因为dom还没有渲染出来，只有在mounted时dom渲染出来了才能拿到ref，uni-app提供的组件使用传统的JS获取dom方式是没有任何效果，如果你想获取uniapp提供组件的DOM元素，uniapp官方文档提供了一下方法 API-界面-节点信息 

我们以uni.createSelectorQuery() 为例子，创建dom实例时，记得需要在这个mounted() 生命周期里面进行，这个生命周期它代表组件已经创建完成，可以挂载实例，进而获取dom元素。

<view>
    <text id="text">测试dom</text>
</view>
--------------------------------------------------------
mounted(){
     const query = uni.createSelectorQuery().in(this);
     query.select('#text').getBoundingClientRect(data => {
       console.log(data)
  }).exec();
}

也可以写在methods方法里面，然后通过mounted() 调用。

mounted() {
          this.getDom()
        },
methods: {
     getDom() {
         const query = uni.createSelectorQuery().in(this);
            query.select('#text').boundingClientRect(data => {
                    console.log(data)
             }).exec();
     }
 }