今天在线引入了一个VUE的js库,然后数据在onresize触发回调中不更新vue的属性值,突然想到用nextTick 让vue立即渲染一下这个数据,不进入vue的事件渲染队列,代码如下:

Uncaught  TypeError: this.$nextTick is not a function-QUI-Notes

报错分析

然后就回到了标题的bug:Uncaught  TypeError: this.$nextTick is not a function

注意这个不是这个报错:Uncaught  TypeError: this.nextTick is not a function ,区别在于我的nextTick 写法没有错,还是知道需要加$符号的。

然后仔细看了看代码,找到问题——> this

onresize事件是window的回调,我又在回调里面使用了this,那是否有可能this指向了window,而不是当前的vue实例,想到此,打印了这个this,如下:

Uncaught  TypeError: this.$nextTick is not a function-QUI-Notes

果然是这个原因导致的,记录一下吧!

解决办法

把this赋值给另外一个变量吧!

let that = this;

发散思考

onresize是window的方法,那么会不会window的方法都会有这样的问题?有兴趣的朋友可以试试,结果应该是的!从此要记住,不仅仅要注意setTimeout,setInterval 没有this指向的问题,也要知道window的方法会指向到window。