外部类实例内部变更后，如何通知Vue重新实现响应式？

嘿，这个问题我之前也碰到过——外部库的类实例不受Vue控制，内部改了属性Vue完全没反应，确实头疼。给你几个实用的解决方案，根据你的场景选就行：

1. 替换实例引用（最简单直接） #

当外部实例的结构发生变化后，直接把组件里绑定的实例替换成一个新的引用就行。Vue对引用变化是敏感的，会自动重新渲染并给新实例加上响应式监听。

比如可以用深拷贝生成新实例：

// 用JSON序列化/反序列化快速深拷贝（注意：会丢失函数、Symbol等特殊类型）
this.item = JSON.parse(JSON.stringify(item));

// 如果实例里有特殊类型，用lodash的深拷贝更靠谱
// this.item = _.cloneDeep(item);

这种方式不用管实例内部改了啥，只要换个引用，Vue就会“重新认识”这个实例。

2. 手动给新增属性加响应式 #

如果只是给实例新增单个属性，可以用Vue提供的$set（组件内）或者Vue.set（全局）来添加，这样Vue会自动给这个属性加上响应式监听：

// 给item新增一个叫newProp的属性，值为'hello'
this.$set(this.item, 'newProp', 'hello');

但如果是批量增删属性、嵌套结构变化，这个方法就有点繁琐了，不如直接换实例来得快。

3. 强制组件重新渲染 #

如果不想改实例，也可以直接让组件强制刷新，读取实例的最新状态。Vue组件自带$forceUpdate()方法，调用它就能触发重新渲染：

// 在组件的方法里调用
this.$forceUpdate();

不过这个是“应急方案”，因为实例本身还是非响应式的，下次再改还要手动调用。而且它只会刷新当前组件和子组件，别过度用，避免性能浪费。

4. 初始化时把实例转成响应式对象 #

如果你的外部实例在组件初始化时就能拿到，可以直接用Vue的API把它转成响应式对象：

• Vue 2里用Vue.observable()：

this.item = Vue.observable(externalInstance);

• Vue 3里用reactive()：

import { reactive } from 'vue';
// ...
this.item = reactive(externalInstance);

但要注意：如果外部类的内部方法是修改它自己的原始实例，而不是这个包装后的响应式对象，那Vue还是监听不到变化。这种情况就只能回到前面的方案了。

总结一下：偶尔变更用替换实例或$forceUpdate；单个属性新增用$set；长期需要响应式的话优先初始化时转成响应式对象。

内容的提问来源于stack exchange，提问作者dim255