解决 Error in created hook: “TypeError: Cannot read property ‘xxxxxx‘ of undefined“

写Vue 的时候常遇到的错误之一就是XXXXXX未定义,然后来一个undefined
这种问题一般都是创建钩子出错:无法读取未定义的 xxx 属性。

此错误一般多出现在 created() 中, Vue 中数据渲染和DOM 元素渲染是异步的,此时可能会出现加载先后的问题。在DOM 元素渲染未完成的情况下,去操作DOM元素就会出现问题。官方文档中说明this.$nextTick 可解决此问题。

具体 this.$nextTick 是如何解释和定义可参考官方文档

解决方法就是在这里面去实现逻辑:

this.$nextTick(() => {
          // 在此处执行你要执行的函数
      });

一般初始化页面的时候将函数方法放在created()里面或者mounted(),
两者区别不是很大,使用的时候还是需要看场景,本人喜欢放在**mounted()**里面,在vue实例挂载的时候就执行里面的函数方法,当然,也可以直接在创建vue实例的时候就去执行函数方法,不懂vue生命周期的可以查看一下官方文档。钩子函数在实际情况当中使用的频率还是很高的,建议小白学习一下vue的生命周期。

你可能感兴趣的:(JavaScript,vue.js,前端,javascript)