vm.$nextTick( [callback] )用法

为什么80%的码农都做不了架构师？>>>

在项目开发中，经常会遇到这样的场景。通过ajax获取到数据后，我们要去渲染轮播图的dom或者初始化列表使用的滚动插件，如下：

var app = new Vue({el: '#app',data: {bannerData: [],listData: []},created () {var that = this// 在created钩子函数中调用ajax获取数据jq.ajax({// 省略。。。success (data) {that.bannerData = data.bannerDatathat.listData = data.listData// 赋值成功后，初始化轮播图插件，滚动插件this.initBanner()this.initScroll()}})  }
})

如以上代码，当我们将项目跑起来时往往会发现我们的轮播图无法轮播，列表也无法滚动。问题产生的原因是什么？

原因是vue的异步渲染dom。当我们给data选项中的属性完成赋值后，dom渲染工作是异步进行的。也就是说当我们对轮播图，滚动列表进行初始化的时候，dom还未渲染结束，自然也就无法生效了。

解决的办法是什么？使用vm.$nextTick( [callback] )！

用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

了解用法之后修改以上代码 created 钩子函数部分

created () {var that = this;jq.ajax({success (data) {that.bannerData = data.bannerDatathat.listData = data.listDatathat.$nextTick(() => {// 当dom渲染完成后，初始化轮播图插件，滚动插件this.initBanner()this.initScroll()})})
}

ok，dom异步渲染问题再也难不到我们啦！

转载于:https://my.oschina.net/cc4zj/blog/1820068

vm.$nextTick( [callback] )用法相关推荐

callback用法 js vue_Vue.js 实例方法
Vue 实例方法实例属性 1.组件树访问 1-1.vm.$parent 用来访问当前组件实例的父实例,如果当前实例有的话 1-2.vm.$root 当前组件树的根 Vue 实例.如果当前实例没有父实 ...
$nextTick的用法
vm.$nextTick 参数: {Function} [callback] 用法:将回调延迟到下次DOM更新循环之后执行.在修改数据之后立即使用它,然后等待DOM更新.它跟全局方法 Vue.next ...
callback用法 js vue_Vue前端开发——使用高德地图WebApi
要求: 实现关键字搜索说明: 基于Vue(2.x)+element+高德Web服务api(2.0) 高德地图2.0版本以前的实现方式需要自己封装请求方法,2.0版本提供了个请求服务WebServic ...
elementUI中，操作表格单行的dom-锁定和解锁——$nextTick用法-dom根据数据改变而改变
elementUI中,操作表格单行的dom-锁定和解锁--$nextTick用法-dom根据数据改变而改变 1.$nextTick应用场景需要在视图更新之后,基于新的视图进行操作.即:数据改变,do ...
computed用发_Vue中的computed属性和nextTick方法
computed computed属性的实现原理 Vue实例初始化时,给data的每个属性(dataKey)都添加getter和setter方法计算属性computed初始化时,提供的函数将作为对应 ...
清空div中的内容而不刷新整个页面_Vue中的$nextTick机制
nextTick 出现的前提因为Vue是异步驱动视图更新数据的,即当我们在事件中修改数据时,视图并不会即时的更新,而是等在同一事件循环的所有数据变化完成后,再进行视图更新.类似于Event Loop ...
一文带你搞懂vue中的this.$nextTick
文章目录 1.Vue.nextTick(callback) 使用原理 2.created和mounted对比 3.例子说明 4.实际遇到的问题:vue项目中 elementUI 中表格多选框默认选中, ...
vue.nextTick()方法的使用详解（简单明了）
什么是Vue.nextTick()?? 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法.所 ...
【Vue】9 - 组件（全局、局部）、通信（props、$meit、$refs）、插槽slot、component、$nextTick等
文章目录 1. 组件命名 2 . 全局组件 3. 局部组件 4. 嵌套组件 5.发布订阅 6. 组件间通信父传子(属性传递) 子传父(触发事件传递:传子的数据,触发父的方法) 案例:模态框 ...
VUE this.$nextTick()的使用场景
[TAG - 1]: 官网解释: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新. 它跟全局方法 Vue.nextTick 一样,不同的是回调的 this ...

vm.$nextTick( [callback] )用法

vm.$nextTick( [callback] )用法相关推荐

最新文章

热门文章