Vue.js中this.$nextTick()的使用
2023-09-11 14:18:05 时间
原文地址:https://www.cnblogs.com/jin-zhe/p/9985436.html
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我们将打印输出的代码放在setTimeout(fn, 0)中;
先来第一个例子看一看
<template> <section> <div ref="hello"> <h1>Hello World ~</h1> </div> <el-button type="danger" @click="get">点击</el-button> </section> </template> <script> export default { methods: { get() { } }, mounted() { console.log(333); console.log(this.$refs['hello']); this.$nextTick(() => { console.log(444); console.log(this.$refs['hello']); }); }, created() { console.log(111); console.log(this.$refs['hello']); this.$nextTick(() => { console.log(222); console.log(this.$refs['hello']); }); } } </script>
可以根据打印的顺序看到,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象
然后来看第二个例子
<template> <section> <h1 ref="hello">{{ value }}</h1> <el-button type="danger" @click="get">点击</el-button> </section> </template> <script> export default { data() { return { value: 'Hello World ~' }; }, methods: { get() { this.value = '你好啊'; console.log(this.$refs['hello'].innerText); this.$nextTick(() => { console.log(this.$refs['hello'].innerText); }); } }, mounted() { }, created() { } } </script>
根据上面的例子可以看出,在方法里直接打印的话, 由于dom元素还没有更新, 因此打印出来的还是未改变之前的值,而通过this.$nextTick()获取到的值为dom更新之后的值
this.$nextTick()在页面交互,尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势,这里只是简单的例子,实际应用中更为好用~
嗯,就酱~~
相关文章
- Vue初级教程
- vue - webpack.dev.conf.js for merge
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- vue@2.6.14小目标列表
- weexpack 的 Login.vue 及 vue 的 Login.vue
- 微信小程序 - 父组件调用子组件的函数方法(像 Vue.js 中 ref 属性一样,直接 this.$refs.xx 获取子组件数据和方法)详细教程示例代码
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- Vue Nuxt.js - 根据后端返回的唯一 ID / code,生成 “唯一“ 的推荐码、邀请码、订单号、加密路由、一串英文+数字长字符等 (支持反序列化原 ID 解码,逆向得出 ID 二者互转)
- Vue——详解MVVM模型在vue中的使用
- 使用Vant 报错(0 , vue__WEBPACK_IMPORTED_MODULE_10__.ref) is not a function)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- (26)打鸡儿教你Vue.js
- (1)打鸡儿教你Vue.js
- Web前端-Vue.js必备框架(四)
- Web前端-Vue.js必备框架(一)
- vue axios
- vue生成二维码并保存图片
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- vue中使用vw适配移动端
- Vue工程化入口文件main.js中Vue.config.productionTip = false含义
- 前后端加密解密 【JS加密模块(md5 、 crypto 、 crypto-js、jsencrypt) python RSA加密解密(pycryptodome )模块安装与使用】
- vue.js click点击事件获取当前元素对象及获取自定义属性
- 粗暴将tinymce富文本编辑器整合到vue项目
- Electron-vue实战-每日清单---02Electron-vue的目录详解
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- [js高手之路] vue系列教程 - 事件专题(4)
- 浅析Vue移动端/PC端的两种适配解决方案:amfe-flexible+postcss-pxtorem 与 postcss-px-to-viewport 及其在vite中如何配置
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- 剖析 Vue.js 内部运行机制 (1)
- Vue.js style (内联样式)
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。