引入Vue.js使用ref标签获取DOM时this.$refs报undefined错误求助

• this指向完全错误：你写在普通function声明的window.onload回调中时，回调内部的this指向的是全局window对象，window上不存在$refs属性，自然会报「Cannot read properties of undefined (reading 'element')」的错误。
• 执行时机不匹配：原生window.onload只监听原生DOM加载完成，和Vue的渲染流程完全无关，就算修正了this指向，也可能出现Vue还没完成模板渲染、$refs还没收集到对应元素引用的问题，依然拿不到目标值。
• 额外排查点：如果加了ref的<nav>标签不在Vue实例的挂载范围内，Vue根本不会识别这个ref属性，就算时机和this都对，也拿不到对应元素。

直接引入vue.js文件的场景下，按照Vue的生命周期规则写逻辑即可，不要混用原生onload事件处理Vue相关的DOM操作：

1. 把带ref的DOM元素放到Vue实例挂载的容器内部
2. 把获取元素高度的逻辑挪到Vue实例的mounted生命周期钩子里，这个钩子触发时Vue已经完成所有DOM渲染，$refs已经完成收集，且钩子内部的this默认指向当前Vue实例，可以直接访问。

正确代码示例：

<!-- 先引入vue.js文件 -->
<script src="你的vue.js文件路径"></script>

<!-- Vue挂载的根容器，所有要被Vue识别的内容都要放这里面 -->
<div id="app">
  <nav ref="element">导航栏内容</nav>
  <!-- 其他页面内容 -->
</div>

<script>
new Vue({
  el: '#app',
  // 注意不要给mounted用箭头函数，否则this会指向外层作用域失效
  mounted() {
    const navHeight = this.$refs.element.offsetHeight
    console.log('导航栏高度：', navHeight)
  }
})
</script>

如果确实需要在Vue实例外部获取ref值，可以先把Vue实例存为变量，结合$nextTick等渲染完成后再取值，不推荐常规场景这么写：

const vm = new Vue({
  el: '#app'
})
vm.$nextTick(() => {
  const navHeight = vm.$refs.element.offsetHeight
  console.log(navHeight)
})

注意：所有Vue配置项里的方法、生命周期钩子都不要用箭头函数编写，箭头函数没有自身的this绑定，会继承外层作用域的this，直接导致this.$refs、this.$el这类实例属性访问失败。

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