Vue.js中this.$nextTick()的使用
2023-09-27 14:24:14 时间
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对象之后的操作有很大的优势,这里只是简单的例子,实际应用中更为好用~
嗯,就酱~~
相关文章
- 前端实操案例丨如何实现JS向Vue传值
- vue.js mouse over change the image
- vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
- 精品微信小程序ssm家校通系统+后台管理系统|前后分离VUE
- Vue.js:使用v-model获取range滑块值
- Vue.js:使用v-bind在列表选项上绑定索引
- vue.js:使用v-bind通过JSON绑定多个class案例
- vue.js:使用v-bind通过数组绑定多个class案例
- vue.js:全局组件和局部组件
- vue.js父传子案例
- 适合前端Vue开发童鞋的跨平台Weex
- [收藏]VUE优秀UI组件库合集
- Vue学习笔记之el-form表单 el-form-item label不换行
- Vue 简单实例 地址选配9 - 确认地址 - 删除地址
- vue项目中使用scss
- electron-vue:Vue.js 开发 Electron 桌面应用
- Vue学习(六)计算属性和侦听属性的区别以及应用场景
- vue源码构建代码分析
- 前端实现放大镜效果【原生js实现、vue实现】
- Vue Nuxt.js 概述
- Vue.JS React 精彩文章汇总
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
- Vue.js 2.0 快速上手精华梳理
- Vue.js Mixins 混入使用
- Vue.js 系列教程 2:组件,Props,Slots
- vue 计算属性实现过滤关键词
- Vue从入门到精通——第一章 Vue核心