vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)

初始代码结构展示:



{ {msg}}

通过打印结果发现两次打印是一样的:

vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)_第1张图片

解决方式有两种:

第一种是通过setTimeout(延时器)--》判断延时的时间是个问题,不建议采用;

vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)_第2张图片vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)_第3张图片

第二种是Vue官网提供的方式。Vue.nextTick()或者this.$nextTick():

vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)_第4张图片vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)_第5张图片

你可能感兴趣的:(vue,前端)