vue $refs报错的解决办法：1、打开相应的代码文件，然后加上“this.$nextTick();”；2、在mounted()钩子函数中调用即可。
本教程操作环境：windows7系统、vue2.5.17版，DELL G3电脑。
【相关文章推荐：vue.js】
项目开发中遇到，cannot read property ‘style’ of undefined的问题。我是怎么解决的，不多说，直接贴代码。
created() {
this.getAddBG();
},
methods: {
getAddBG() {
let config = {
service: "200017",
h5Type: "activity"
};
this.$http.featchH5Post(config).then(res => {
let list = res.data.data.advertiseList;
list.forEach(item => {
this.$refs[
item.name
].style.backgroundImage = `url(${item.defaultPicture})`;
});
});
}
}
解决办法：
第一种方法：加上this.$nextTick();
created() {
this.$nextTick(() => {
this.getAddBG();
});
}
第二种方法：在mounted()钩子函数中调用。
mounted() {
this.getAddBG();
}
调查分析原因：
1、先从vue生命周期与Vue.nextTick()说起。
学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。
created()钩子函数执行的时候DOM并未进行任何渲染，此时不能进行DOM操作。
在Vue生命周期的created()钩子函数进行DOM操作一定要放在Vue.nextTick()的回调函数中。
mounted()钩子函数执行时所有的DOM挂载和渲染都已经完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
2、Vue官方文档的解释。
Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重）工作。Vue在内部尝试对异步队列使用原生的Promise.then和MessageChannel，如果执行环境不支持，会采用setTimeout(fn, 0)代替。
Vue.nextTick()用于延迟执行一段代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
