记Vue学习中的小坑

定时器问题

在Vue的实例中,切换路由的时候会自动调用destroyed中的函数,如果在实例中存在定时器,需要手动在那里清除定时器。

我应该在什么时候去操作DOM?

在我开发listView的时候,我将它封装成了一个组件,使用props来进行传值
一般情况下 我们马上想到的在子组件使用mounted 等到DOM ready 执行一系列的操作
这里写图片描述
这样是没错的,可以正确地拿到你想要的DOM 因为在父组件中 它传给子组件的数据已经是定义好的了
这里写图片描述
如果在父组件中数据是异步获取的呢?
这里写图片描述
这里,我使用了定时器来模拟数据异步获取的过程 结果就大不同了
这里写图片描述
页面是正常渲染了 没错 但是DOM的高度是不是拿不到了?
这个时候我想到了$nextTick 哈哈哈 是不是感觉世界要美好了起来
这里写图片描述
但是….结果还是不变
终于 在纠结了好久好久 看了网上对nextTick的解释 发现它是为了在数据更新后拿到新渲染的DOM 也就是当前页面呈现的 这个东西就是保证了在下一次DOM更新后执行 GET了 我一直以来就是想要等待DOM ready 但是我咋知道啥时候ready mounted第一次ready的时候 也仅仅只是将我PROPS的初始值渲染DOM ready 并不是我想要的真正的ready
本来也就是要在拿到数据后DOM 更新 然后拿到DOM的高度
所以 我想到了用watch 这一次 终于如我所愿了啊….
这里写图片描述
在这里理一理思路,我一直想要的就是DOM ready 我的dom ready在拿到数据后 所以我就监听我的数据改变 然后使用$nextTick OK 终于解决了 简直要哭出来了….

猜你喜欢

转载自blog.csdn.net/bigbigpotato1024/article/details/80172833