this.$refs.xxxundefined有几种情况：1.在created中调用钩子函数的原因：created()完成创建实例后立即调用。在这一步中，实例完成了以下配置：数据观察者、属性和方法的操作、watch/event事件回调。但是，挂载阶段尚未开始，$el属性当前不可见。所以this.$refs根本无法调整dom，因为页面还没有挂载。2.数据或条件渲染后调用（v-if，v-show）的原因：ref本身是作为渲染结果创建的，在初始渲染时无法访问它们。它们不存在。$refs没有响应，所有动态加载的模板更新都无法相应更改，并且仅在组件呈现后填充。它用于注册元素或子组件的参考信息。注册完成后，会注册到父组件的$refs对象上。原因：如果DOM结构中的某个DOM节点使用了v-if、v-show或v-for（根据后台数据动态操作DOM），那么这些DOM在mounted阶段是不存在的。mounted阶段一般用来发送请求获取数据，做一些路由钩子的事情。简单的说就是在mountedhook中加载数据，这个阶段加载的数据不会更新到DOM中。所以在mountedhook中使用$refs时，如果ref位于有v-if、v-for、v-show的DOM节点中，则返回值只能是undefined，因为它们在mounted中根本不存在阶段。如果mounted阶段是loading阶段，那么updated阶段就是数据更新到DOM（处理加载数据）的阶段。这时候使用this.$refs.xx来找到DOM100%节点。updated和mounted的区别在于，每次更新DOM结构时，Vue.js都会调用一次updated钩子函数，而mounted钩子函数只执行一次。解决方案：使用$nextTickVue来实现响应式，并不是在数据变化后立即改变DOM，而是按照一定的策略更新DOM。$nextTick是在下一个DOM更新周期结束后执行延迟回调。修改数据后使用$nextTick，回调中可以获取到更新后的DOM。在下一个DOM更新周期结束后执行的延迟回调。修改数据后立即使用此方法获取更新后的DOM。数据更新后，使用setTimeout或setTimeout(()=>{console.log(this.$refs.***)},0)动态绑定ref并使用v-for，使用this.$refs[refName]Unabletogetref原因：解决方法：把this.$refs[refName]改成this.$refs[refName][0]=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_paramhttps://www.cnblogs.com/31135html/p
