vue nexttick的理解和使用场景
Vue 理解 场景 使用 nextTick
2023-09-11 14:19:37 时间
应用场景
需要在视图更新之后,基于新的视图进行操作
文档说明
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
nextTick原理
1、异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新
2、事件循环说明
简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
created、mounted
在 created 和 mounted 阶段,如果需要操作渲染后的试图,也要使用 nextTick 方法。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
以下使用nexttick的三种情况
1、点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点。
showsou(){
this.showit = true //修改 v-show
document.getElementById("keywords").focus() //在第一个 tick 里,获取不到输入框,自然也获取不到焦点
}
修改为:
showsou(){
this.showit = true
this.$nextTick(function () {
// DOM 更新了
document.getElementById("keywords").focus()
})
}
2、点击获取元素宽度。
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}
3、使用 swiper 插件通过 ajax 请求图片后的滑动问题。
参考阅读:
https://segmentfault.com/a/1190000012861862?utm_source=tag-newest
相关文章
- [转] 深入理解vue 一些底层原理
- vue - webpack.dev.conf.js for node-portfinder
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- vue Iframe
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- [转]Vue CLI 3搭建vue+vuex 最全分析
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue项目--公共组件的提取之轮播图
- 推荐 | Vue 入门&进阶路线
- 解析Nuxt.js Vue服务端渲染摸索
- vue项目中router路由配置
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- vue指令与组件
- vue-监听视图滚动-加载下一页数据(鼠标滚动到底,加载)
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- vue项目做微信网页授权
- vue之v-for使用说明
- petite-vue源码剖析-v-if和v-for的工作原理
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Vue开发实例(12)之实现动态左侧菜单导航
- Vue自定义指令实现input限制输入正整数
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想