search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.95k stars 33.68k forks source link

需要一个监听view model改变后 页面重新渲染完成的事件 #866

Closed Dafrok closed 9 years ago

Dafrok commented 9 years ago

使用ajax读取数据给$data赋值 页面渲染是异步的 会导致在ajax回调中进行的dom操作无法同步完成 我想应该有一个能够监听渲染完成的事件 然后在这个事件中进行这些dom操作

285858315 commented 9 years ago

好像是这个吧？ Vue.nextTick

Dafrok commented 9 years ago

@285858315 这个API似乎不能满足我目前的业务需求 我的使用场景是结合IScroll和Zepto.ajax ajax异步读取数据赋值给Vue对象的$data 在页面渲染完成后页面长度发生变化 IScroll必须应该执行refresh才能正常使用 我在nextTick中执行这个回调是不起作用的 最后被迫使用了setTimeout 0这种黑魔法 我觉得应该是有更好的办法的

yyx990803 commented 9 years ago

理论上不应该出现这种情况。你是在哪里调用的 nextTick? 正常来说在赋值之后调用，回调触发时应该渲染完毕了

vm.items = [ ... ]
Vue.nextTick(function () {
  // ...
})

如果这样不起作用，那么你的 v-repeat 是否用了组件？这些组件内部是否有什么异步操作？

Dafrok commented 9 years ago

@yyx990803 我理解了 应该是每次赋值后调用nextTick 我看文档上写nextTick是全局API 误以为是一次配置后全局都会过来跑这个回调 谢谢！

niluanxy commented 9 years ago

帖主的需求和我类似，我也是配合 iscroll ，不过没用zepto，自己写的DOM操作库和UI控件，也遇到iscroll的刷新问题，我的解决办法是自己自定义了iscroll组件，然后监控 touchstart 事件，手动 refresh 当前的 iscroll ，不过这个根本的解决办法是和 ng 一样，在路由中加入 reslove 功能，好像还没发布的 vue-route 有这个功能了，我也就没自己写这个，等 vue-route 出来看看，不满意了自己弄一个。

miaotaizi commented 8 years ago

我也在做类似的需求, 请问nextTick 是只在赋值后调用, 那么我现在把数据放在 vuex里面了, 再在页面切换之后iscroll的绑定就失效了, 暂时用的 @Dafrok 的方式 settimeout 0, 请问最佳实践是如何啊?

Dafrok commented 8 years ago

@miaotaizi 理论上nextTick会帮你判断你的场景是否需要setTimeout

whu12yz commented 6 years ago

@yyx990803 看了下nextTick的实现，你是在microTask中去执行的回调，这只能保证dom数据更新完成，但是dom渲染是异步的，执行microTask的时候异步的dom渲染不一定已经完成啊？