<template> <view class="range"> <view v-if="show" ref="initWidth">354754</view> </view> </template> <script> export default { data() { return { show: false }; }, mounted() { console.log(this.$el); }, created() { this.show = true; } } </script> <style lang="stylus"> </style>输出 undefined

根据你提供的代码，可能是因为你在`mounted`钩子函数中使用了`this.$el`来获取组件的根元素，但是`this.$el`在`mounted`钩子函数执行之前是不存在的，因此你会得到`undefined`的输出。

如果你想要在`mounted`钩子函数中获取组件的根元素，可以使用`$nextTick`方法等待DOM渲染完成之后再获取，例如：

mounted() {
  this.$nextTick(() => {
    console.log(this.$el);
  });
}

这样，在DOM渲染完成之后就可以正确地获取到组件的根元素了。同样，你也可以将`console.log`语句改为`console.log(this.$refs)`来获取`ref`元素的引用。

相关问题

<template> <view class="range"> <view ref="initWidth" class="initWidth">354754</view> </view> </template> <script> export default { data() { return { }; }, mounted() { console.log(this.$refs); } } </script> <style lang="stylus"> </style>

你的代码中使用了`ref="initWidth"`来引用一个DOM元素，这是正确的。但是你在`mounted`钩子函数中打印输出`this.$refs`时，结果仍然是空对象。这有可能是因为你的组件模板中的`view`元素是通过Vue的运行时编译器进行编译的，而不是通过Vue的模板编译器进行编译的。

如果你使用的是Vue的单文件组件（.vue文件），则可以通过配置Vue的构建选项来启用模板编译器，例如：

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

如果你使用的是Vue CLI创建的项目，默认情况下已经启用了模板编译器，不需要额外的配置。

另外，你可以尝试在模板中使用`v-if`等指令来确保DOM元素已经被正确渲染到页面上，例如：

<template>
  <div>
    <div v-if="show" ref="initWidth">354754</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  mounted() {
    console.log(this.$refs);
  },
  created() {
    this.show = true;
  }
};
</script>

这样，在组件`mounted`钩子函数中打印输出`this.$refs`时，就会正确地输出DOM元素的引用。