vuejs2 - Vue 2 关于 nextTick

我读过 nextTick 允许在下一个操作中执行代码。但这在我的代码中不起作用，有人可以帮助我吗？请纠正我。谢谢。

.vue

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        Vue.nextTick(()=>{
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

{{user.id}} 确实有效。这给了我以下错误:



编辑#1
如果我做这样的事情它有效，但在我看来这不应该是正确的方法。

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

编辑#2
如果我做这样的事情它不会工作因为 vm.user.id 没有设置。

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
          vm.shop = response.data.data.shop
        })
      },
}
.....

最佳答案

我认为您对 nextTick 的作用的理解是不正确的。如果您阅读 documentation ，它表示您传递给 nextTick 函数的回调将在下一次 DOM 更新后执行。

假设您有一个属性，该属性使用 v-if 指令确定元素在 DOM 中是否存在。例如，如果您更改属性的值以使元素存在于 DOM 中，则您可能必须等待 Vue 处理更改并更新 DOM，然后才能获取该元素的引用。在这种情况下，您应该使用 Vue.nextTick 来确保在您想要查询 DOM 以获取该元素时，它确实存在。

您的场景与 DOM 没有任何关系。

您有 2 个异步 HTTP 调用要一个接一个地执行，因为第二个依赖于第一个的结果。您的原始实现和第三个 (EDIT#2) 是不稳定的，因为在触发第二个 HTTP 请求之前您没有确保第一个 HTTP 请求是完整的，这解释了为什么您会收到有关未设置 vm.user.id 的错误。

您的第二个实现 (EDIT#1) 更正确，因为第二个 HTTP 请求在第一个完成后触发。不过，我建议做一个小的修改:

getUserInfo() {
    vm.$http.get('/getAuthUser')
        .then(response => {
            vm.user = response.data;

            return vm.$http.get('/getShop/' + vm.user.id);
        }).then(response => {
            vm.shop = response.data.data.shop;
        });
}

第一个回调返回一个 Promise，其结果被送入第二个 then 调用。我喜欢这种方法，因为它避免嵌套 then s。我还建议您阅读 MDN docs on Promises 。

关于vuejs2 - Vue 2 关于 nextTick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42152937/