Vue 2组件的data选项中能否通过ref访问HTML元素？

1. 直接结论：不能在data选项内访问$refs #

Vue实例初始化的生命周期顺序为：props/data初始化 → 模板编译 → DOM挂载 → $refs填充完成。你在data函数执行时，实例还未完成挂载，$refs是空对象，自然无法获取到对应的元素，所以你写的代码会出现undefined的问题。

官方示例中直接传入document.body可以正常运行，是因为document.body是全局DOM对象，在页面初始化时就已存在，不需要等待Vue组件挂载。

2. 正确实现方案 #

方案1：在mounted钩子中初始化插件 #

在mounted生命周期执行时，组件DOM已经挂载完成，$refs已经生成，可以正常获取到对应元素：

data() {
  return {
    // 先初始化空数组占位
    flickingPlugins: []
  }
},
mounted() {
  // 此时$refs已可正常访问
  this.flickingPlugins = [
    new Arrow({
      prevElSelector: '.overview-arrow-prev',
      nextElSelector: '.overview-arrow-next',
      parentEl: this.$refs['overview-arrows']
    })
  ]
}

方案2：配合v-if保证组件渲染时插件已初始化 #

如果Flicking组件不支持动态修改plugins参数，可以在模板中给Flicking加v-if判断，等插件初始化完成后再渲染组件，避免初始化报错：

<template>
  <!-- 仅当插件初始化完成后再渲染Flicking组件 -->
  <Flicking v-if="flickingPlugins.length" :plugins="flickingPlugins">
    <!-- 轮播内容 -->
  </Flicking>
  <div ref="overview-arrows">
    <button class="overview-arrow-prev">上一页</button>
    <button class="overview-arrow-next">下一页</button>
  </div>
</template>

内容的提问来源于stack exchange，提问作者RTF