vue 视图更新不及时

vue开发的过程中我们时常会遇到 数据更新和视图更新 不匹配的问题。简单点说就是vue没有监测到这一块儿的数据变化。

简单的解决方法有几种

vue2 中

// 第一种：
// Vue.set() 方法（this.$set（））
Vue.set( target, key, value ) 中有三个参数给我们
 
this.$set(this.student,"age", 24)

// target：要更改的数据源(可以是对象或者数组)
// key：要更改的具体数据 如果是数组 就是索引值
// value ：重新赋的值

// 第二种：
// $forceUpdate 主动捕获并刷新视图数据

// 异步中
data(){
	return {
		list: [3,2,1]
	}
}
···
this.list = [1,2,3] // 在更新数据的后边跟一句刷新数据的操作即可
this.$forceUpdate()

// 第三种
// 直接将异步数据转同步操作【不建议这么操作，具体方法不详细说明了】

vue3中

// vue3 中相对简单
// 因为vue3 中会提前使用ref或者是reactive 定义变量，正常情况下异步也会同步数据到视图中。
// 但是如果出现网络延迟，接口有严格调用顺序的也会出现视图更新问题，所以我个人的做法是采用上述vue2中的第二种方法。
import { getCurrentInstance } from "vue";
setup(){
	// 解构赋值 
	// 设置一个自定义名称 that 或者直接用ctx 
  	let {ctx:that} = getCurrentInstance()
	that.$forceUpdate()

	//	let ctx= getCurrentInstance()
	//	ctx.$forceUpdate()
}