之前在项目中遇到一个坑,需要将一个带有v-if的页面元素重新渲染,从而在一个方法中将绑定的data属性值连续进行置false和置true的操作,希望通过这样的操作让页面元素重新渲染,但是操作失败。之后查找原因后将问题解决,为了加深印象特写此文章。

Vue的数据更新不是即时的,而是存在一个异步更新的队列,这个队列缓存所有在当前方法域内的数据变化,当相同watcher被监测到触发多次时,只会将最后一次变化存入队列中。

下面用一个例子来说明。页面点击一个按钮,调用changeVariable方法,方法内试图重复修改msg属性,同时监听msg属性是否有变化,控制台输出

data () {
	return {
		msg: 'show time'
	}
},
methods: {
	changeVariable () {
		this.msg = (new Date()).getTime().toString()
		this.msg = 'show time'
	}
},
watch: {
	msg (newValue) {
		console.log(newValue)
	}
}

Vue在该方法发现msg属性被修改了两次,只将第二次的监听结果放入了更新队列中,而在第二次的监听中,属性值并没有变化,所以watcher并没有发现值被改变,无控制台输出。
Vue提供等待数据变化的方法Vue.nextTick(callback),当数据发生变化后,回调方法将被执行,下面我们在两次改变属性之间加上这个方法,方法中输出msg的值

data () {
  return {
    msg: 'show time'
  }
},
methods: {
  changeVariable () {
    this.msg = (new Date()).getTime().toString()
    this.$nextTick(function () {
      console.log(this.msg)
    })
    this.msg = 'show time'
  }
},
watch: {
  msg (newValue) {
    console.log(newValue)
  }
}

结果控制台输出了’show time’,这说明nextTick并没有第一时间输出msg的值(当前时间戳),而是在等待Vue发生下一次data变化时,才将msg的新值(‘show time’)输出,尽管其与改变前的值一样

Logo

前往低代码交流专区

更多推荐