【Weex开发】解决组件用v-if显示时出现的抖动问题

现象

单个元素使用v-if时，不会有抖动的问题，但是用在组件上，尤其是组件的布局稍微复杂点，用v-if的话，会出现组件出现之后，内部的元素有一个很短暂的位置调整的现象，估计是和weex的实现机制有关。这里暂且不深究，只是给出一个解决方案来避免这个问题。

解药

组件的第一次构造使用v-if，后续的显示和隐藏则使用自定义的属性来控制，然后在组件内部观察该属性，根据属性值变化来设置组件根元素的visibility。
另外，组件初次被构造时，根元素的visibility默认为hidden，在mounted回调时才改为visible，这样就可以避免出现抖动了。
PS：因为weex只支持单类名选择器，而不支持属性选择器，所以vue的v-cloak指令无法使用

补充

如果v-if内有多个元素，那么视觉上是元素先出现，再调整到设定位置的过程。所以对v-if的元素进行动画设置的时候一定要小心，一定要确保其到位之后再设置动画，否则动画要么没有运行（在v-if为true那一刻设置动画，但是此时dom还没有刷新），要么动画效果不对（v-if内的元素已创建，但是还没调整到位，要到下一帧才行）。建议使用visibility来控制

代码

组件的必要代码：

<template>
  <div :style="{ visibility: componentVisibility }">
    ...
  </div>
</template>
<script>
export default {
  props: [ 'show' ],
  data() {
    return {
      componentVisibility: 'hidden'
    }
  },
  watch: {
    show(val) {
      this.componentVisibility = val ? 'visible' : 'hidden'
    }
  },
  mounted() {
    this.show && (this.componentVisibility = 'visible');
  }
}
</script>

外部使用组件的代码示例：

<template>
  <mycomponent v-if="createMyComponent" :show="myComponentVisible"></mycomponent>
</template>
<script>
export default {
  data() {
    return {
      createMyComponent: false,
      myComponentVisible: false
    }
  }
  methods: {
    showMyComponent(visible) {
      if (visible && !this.createMyComponent) {
        this.createMyComponent = true;
      }
      this.myComponentVisible = visible?true:false;
    }
  }
}
</script>