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()
}