如何解决vue $refs报错问题(2)-木庄网络博客

第一种方法：加上this.$nextTick();

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

第二种方法：在mounted()钩子函数中调用。

mounted() {
  this.getAddBG();
}

调查分析原因：

1、先从vue生命周期与Vue.nextTick()说起。

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 $refs报错问题的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

node+vue怎么实现简单的websocket聊天功能？（代码示例）

vue脚手架搭建流程

为什么vue不使用ajax

bootstrap与vue区别

一文带你看看vue router4中的酷炫功能

vue中递归组件的实现方法介绍（附实例：三级菜单）

vue有react native吗

vue2.0子组件中怎么改变父组件中的值？