vue3+TS中数据更新但视图层未更新的解决办法

前言

　　我们在vue2的时候在MVVM模式下开发，有时遇到数据层级嵌套过深等原因导致数据未更新，常用的方法都是this.$forceUpdate()或者Vue.set()去更新视图层，但是在vue3+TS的开发环境下无法用vue2的解决方法处理。

 

解决方法一：

import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
instance.proxy.$forceUpdate();

 

解决方法二：

　　在数组或对象的数据未更新时，不要用ref而使用reactive，例如 const arr:interface[] = reactive([]);

原因，从原理方面：

　　ref通过Object.defineProperty()的get和set实现数据代理。
　　reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。