vue中$nextTick作用和实例

为什么要使用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>

运行效果：