vuejs nextTick的一个疑惑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <ul>
            <li v-for='i in items'><h1>{{i}}</h1></li>
        </ul>
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js'></script>
    <script>
        new Vue({
             el:'#app',
             data:function(){
                  return {
                    items:[]
                  };
             },
             ready:function(){
               for (var i = 0; i < 3000; i++) {
                 this.items.push( i );
               }
                       
                 
               this.$nextTick(function(){
                 var h = document.body.scrollHeight - window.innerHeight;
                 window.scrollTo(0,h);
               });
                        
                    
            }    
            
        });
    </script>
</body>
</html>

我希望完成一个效果，当数据返回以后进行渲染然后浏览器的滚动条滚动到底部，但是上面这样实现不成功，我试了一下用 setTimeout是可以的，但是看文档说nextTick里面已经有了setTimeout ，上面的代码为什么不行？

更新：系统 osx 10.11.4
chrome版本 50.0.2661.102 (64-bit) 测试无效
火狐， Safari有效。

javascript vue.js

阅读 8.7k

5 个回答

得票最新

五月流溪

952

发布于
2016-07-10

✓ 已被采纳

不知道题主是用的什么环境和浏览器,我这边chrome测试是可以的,原样复制你的代码的.

zp1996

3.2k23763

发布于
2016-11-08

更新于
2016-11-09

问题过了很久，但是仍然想回答一波。这个问题不在于vue，vue1会优先使用MutationObserver，setTimeout只是一个回退替代的方案。所以问题在于的是chrome下MutationObserver配合window.scrollTo有些问题，应该是浏览器的问题，而非是vue的问题.
大家可以根据下面这个例子进行一下测试，第一次进入页面时正常，但是在此基础上进行页面刷新时应该就会失效：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <title>Test</title>
      <style type="text/css">
        #ul{
          font-size: 55px;
        }
      </style>
  </head>
  <body>
    <div id='app'>
        <ul id="ul"></ul>
    </div>
    <script>
      window.onload = function () {
        var cache = document.createDocumentFragment(),
          ul = document.querySelector("ul");
        for (var i = 0; i < 30; i++) {
          var li = document.createElement("li");
          li.innerText = i;
          cache.appendChild(li);
        }
        function hasUpdated() {
          document.body.style.background = "red";
          window.scrollTo(0,800);
        }
        // 利用MutationObserver,在chrome下,window.scrollTo也是无效的
        var mo = new MutationObserver(hasUpdated);
        var option = {
          'childList': true, 
          'subtree': true
        };
        mo.observe(ul, option);
        var p = Promise.resolve();
        p.then(hasUpdated);
        ul.appendChild(cache);
      };
    </script>
  </body>
</html>