h5哪个网站可以做,青岛网站建设哪家公司好,网站开发网页加载缓慢查询数据库慢,策划书模板范文nextTick的作用和使用场景 vue中的nextTick主要用于处理数据动态变化后#xff0c;DOM还未及时更新的问题#xff0c;用nextTick就可以获取数据更新后最新DOM的变化
api文档 Vue.nextTick( [callback, context] ) 参数#xff1a; {Function} [callback]{Object} [context]…nextTick的作用和使用场景 vue中的nextTick主要用于处理数据动态变化后DOM还未及时更新的问题用nextTick就可以获取数据更新后最新DOM的变化
api文档 Vue.nextTick( [callback, context] ) 参数 {Function} [callback]{Object} [context] 用法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取更新后的 DOM。 // 修改数据
vm.msg Hello
// DOM 还没有更新
Vue.nextTick(function () {// DOM 更新了
})// 作为一个 Promise 使用 (2.1.0 起新增详见接下来的提示)
Vue.nextTick().then(function () {// DOM 更新了})2.1.0 起新增如果没有提供回调且在支持 Promise 的环境中则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill所以如果你的目标浏览器不原生支持 Promise (IE你们都看我干嘛)你得自己提供 polyfill。 参考异步更新队列 适用场景第一种有时需要根据数据动态的为页面某些dom元素添加事件这就要求在dom元素渲染完毕时去设置但是created与mounted函数执行时一般dom并没有渲染完毕所以就会出现获取不到添加不了事件的问题这回就要用到nextTick处理第二种在使用某个第三方插件时 希望在vue生成的某些dom动态发生变化时重新应用该插件也会用到该方法这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法例如:应用滚动插件better-scroll时
第三种数据改变后获取焦点
何为$nextTick
因为Vue的异步更新队列$nextTick是用来知道什么时候DOM更新完成的。 详细解读
我们先来看这样一个场景有一个div默认用 v-if 将它隐藏点击一个按钮后改变 v-if 的值让它显示出来同时拿到这个div的文本内容。如果v-if的值是 false直接去获取div内容是获取不到的因为此时div还没有被创建出来那么应该在点击按钮后改变v-if的值为 truediv才会被创建此时再去获取示例代码如下
div idappdiv iddiv v-ifshowDiv这是一段文本/divbutton clickgetText获取div内容/button
/div
script
var app new Vue({el : #app,data:{showDiv : false},methods:{getText:function(){this.showDiv true;var text document.getElementById(div).innnerHTML;console.log(text);}}
})
/script 这段代码并不难理解但是运行后在控制台会抛出一个错误Cannot read property innnerHTML of null意思就是获取不到div元素。这里就涉及Vue一个重要的概念异步更新队列。
异步更新队列 Vue在观察到数据变化时并不是直接更新DOM而是开启一个队列并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中Vue刷新队列并执行实际已去重的工作。所以如果你用一个for循环来动态改变数据100次其实它只会应用最后一次改变如果没有这种机制DOM就要重绘100次这固然是一个很大的开销。 Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver如果都不支持就会采用setTimeout代替。 知道了Vue异步更新DOM的原理上面示例的报错也就不难理解了。事实上在执行this.showDiv true时div仍然还是没有被创建出来直到下一个vue事件循环时才开始创建。$nextTick就是用来知道什么时候DOM更新完成的所以上面的示例代码需要修改为
div idapp
div iddiv v-ifshowDiv这是一段文本/divbutton clickgetText获取div内容/button
/div
script
var app new Vue({el : #app,data:{showDiv : false},methods:{getText:function(){this.showDiv true;this.$nextTick(function(){var text document.getElementById(div).innnerHTML;console.log(text); });}}
})
/script 这时再点击事件控制台就打印出div的内容“这是一段文本“了。 理论上我们应该不用去主动操作DOM因为Vue的核心思想就是数据驱动DOM但在很多业务里我们避免不了会使用一些第三方库比如 popper.js、swiper等这些基于原生javascript的库都有创建和更新及销毁的完整生命周期与Vue配合使用时就要利用好$nextTick。
