这个问题是很早之前遇到的，后来想来，其实是个很简单的问题。在dom记载完成就自动下拉到底部，只需要使用Vue.nextTick(() => {})函数即可，因为vue是虚拟dom，不会实时更新dom，nectTick()就是注册在下一次更新dom之后的回调。
而再看我的问题，其实之所以出现那样的问题，就是ajax的异步执行的问题而已。
/..............................................................................................更新完.............................................................................................../
工作项目是基于vueJs框架的，遇到一个需求：有一组件，在创建时会通过ajax向服务器请求一组数据，以列表形式展示出来，并且自动下拉到底部。
实现思路：首先弄清楚vueJs组件的生命周期，如下图。发完发现图不见了...这里貌似不能放图，就是vueJs生命周期和钩子，读者自行百度一下吧，到处都是。
[img][/img]
[img][/img]
具体细节不做介绍，自行看图或者右转官网查找http://cn.vuejs.org/
知道了生命周期，再对应需求，很自然地关注三个时期beforeCreate，mounted，updated.
1. beforeCreate时期[img][/img]
此时期相当于做一些初始化工作，此时做ajax最合适。代码如下：

beforeRouteEnter(to, from, next) {    next(function(vm) {        if (vm.dataList.length == 0) {            //此处实现ajax            vm.getVersionInfo();        }    });}[img][/img]
代码是之前写的，使用的beforeRouteEnter钩子（vm：因为此时该组件可能还未创建，所以不能用this，而用vm代替，vm所执行代码会在其创建之后执行。），这个钩子会在每次通过vue-route路由进入组件页面前调用，而需求是只有第一次进入需要自动执行ajax，因此还做了判断data是否长度为0，而在写博的时候发现，如果使用beforeCreate钩子应该就不会有这么多麻烦，不过也仅仅是猜测，使用请自行验证。
2. mounted时期
此钩子会在模板（html）编译完成并挂载后调用，最开始我想的是，在这里实现一个自动滚动到底部的操作，但是发现不行。为什么呢？因为ajax是异步操作，在beforeCreate时期执行了ajax，并不能保证在mounted时，数据已经传回，所以此时做下拉操作没有意义。
3 updated时期
此钩子在组件对象data数据发生变化时，而我在ajax的success回调函数里会改变data，所以此时调用应该是很合适的。然而，实现之后又出现了问题，每次自动下拉滚动到底部只能下拉滚动到data原列表的最底部，而新添加的项还在下面。举例来说
1
2
3
4
5（ajax新获取）
每次updated处执行ajax下拉操作自动下拉滚动，只能会到4，而不是5的位置。究其原因，原来是因为updated是执行时，打他只是data改变，而有可能document并没有渲染完成，从而导致，不能处理新添加的项，而偏偏vue并没有提供渲染完成的钩子。
在网上锁了搜了很多资料，一些资料，比较靠谱的是设置一个延迟，setTimeout（），但是这样页面会有明显的一个跳动柑橘感觉闪动，影响用户体验，而我的处理是：

updated() {        let count = 0;        let interval = setInterval(() => {            if (count > 3000) {                clearInterval(interval);                this.isFirst = false;            }            count++;            if (document.body.scrollHeight != document.body.clientHeight) {                document.body.scrollTop = document.body.scrollHeight;                if (document.body.scrollTop == document.body.scrollHeight-document.body.clientHeight) {                    clearInterval(interval);                    this.isFirst = false;                }            }        }, 0);}
这个原理应该很简单，看代码应该能看明白。不过细思起来总觉得这个办法有点蠢，但是老板就要结果了，只能这样了，哪位网友有更好的办法，一定要留言告诉我啊。
---------------------本文来自 _小刀 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/u014445339 ... 475?utm_source=copy

奈斯