vue中$nextTick作用和实例

news2024/11/15 23:30:39

为什么要使用nextTick？

vue中DOM更新是异步执行，相当于我们在修改数据的时候，视图是不会立即更新的，会先把新的数据攒一赞，例如假如v-for更新这三个数据item1和item2和item3，按照vue的特性dom更新的特性会把item1、item2、item3全部更新后才会更新dom，这个时候如果还没有吧这三个数据更新完的时候想获取item1的话就会无法获得item1的值，正是为了应对这种情况才vue出现了一个api：nextTick

作用实例：

1、修改dom元素进行判断在修改样式：

如果不加nexttick的话点击事件触发的时候，字符串变红，然后dom元素更新，但是条件判断并不是更新后执行的，所以第一次点击时时不会付出判断条件后面的语句的

<template>
	<div>
		<div :id="myid" class="" ref="str">123456789</div>
		<button @click="changeColor()">修改dom元素</button>
	</div>
</template>
<script>
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				myid: ''
			};
		},
		created() {
			this.$nextTick(() => {
				console.log('3222', this.$refs.str)
			})
		},
		methods: {
			changeColor() {
				this.myid = 'color'
				this.$nextTick(() => {
					if (this.$refs.str.id == 'color') {
						this.$refs.str.className = 'background'
					}
				})
				// if (this.$refs.str.id == 'color') {
				//     this.$refs.str.className = 'background'
				// }
			}
		}
	}
</script>
<style scoped>
	#color {
		color: red;
	}

	.background {
		background: khaki;
	}
</style>

运行效果：

2、在生命周期函数created中操作

因为生命周期created函数是在dom还没有渲染前使用的函数，如果在creted函数中使用dom肯定会报错，所以在函数中可以用nextTick来获取dom如图所示

如果想在created之前更新dom元素就需要要用$nextTick

<template>
    <div><input ref="obj" type="text" :value="string"></div>
</template>
<script>
  export default {
    data() {
      return {
        string:'samsung',
      };
    },
    created() {
      this.$nextTick(()=>{
        this.$refs.obj.value = 'apple'
        }
      )
    },
	mounted(){
	   console.log(this.$refs.obj.value);
	}
  }
</script>

运行效果：