vue中this.$nextTick()的用法

当我们更改数据时，修改后的数据必须等Dom重新被渲染了才能显示出来，要不然显示的就是初始值。
下面举个例子：

<template>
    <button ref="tar" type="button" @click="testClick">{{content}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                content: '初始值'
            }
        },
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.content = '更新后的值'
　　　　　　　　 console.log(this.$refs.tar.innerText) // 初始值
　　　　　　　   // 这时候直接打印，由于dom元素还没更新,因此打印出来的还是未改变之前的值
				this.$nextTick(()=>{
					console.log(this.$refs.tar.innerText)//更新后的值
				//this.$nextTick()将回调延迟到下次dom元素更新之后执行。
			})
　　　　　　 },
			
　　　　 }
    }
</script>

this.$nextTick()的作用就是将函数延迟到dom元素更新之后执行。
最开始打印的是初始值是因为dom还没更新，过段时间再次调用方法就是更新的值了，此时dom元素已经更新。
芜湖！