类内部属性修改检测：Vue 响应式系统局限与解决策略揭秘

vue.js

2024-03-03 06:14:54

在类内部检测属性修改：深入理解 Vue 响应式系统的局限和解决方案

问题

在 Vue 3 中使用响应式系统时，如果在类的内部修改属性，这些修改不会自动触发 Vue 的响应式系统，导致视图不会更新。这可能会导致应用程序的逻辑不一致和错误。

解决方案

为了解决这个问题，有几种方法可以检测类内部的属性修改：

1. 使用 getter 和 setter 方法

在类中，可以为属性定义 getter 和 setter 方法。当读取或修改属性时，可以在 getter 和 setter 中执行响应式操作，例如更新 Vuex 状态或使用 this.$emit 触发自定义事件。

export class TestClass {
  private _state = 'connected';

  get state() {
    return this._state;
  }

  set state(value) {
    this._state = value;
    this.$emit('state-changed', value); // 触发自定义事件
  }
}

2. 使用 computed 属性

在 Vue 组件中，可以创建 computed 属性来计算类的属性值。当类的属性值发生变化时，computed 属性也会重新计算并更新视图。

<script setup>
import { TestClass } from "@/core/test/testClass";

const test = ref(new TestClass());
const state = computed(() => test.value.state);
watch(state, (newVal) => {
  console.log('watch fired', newVal);
});
</script>

3. 使用外部响应式对象

可以创建一个外部响应式对象，并在类内部使用该对象来跟踪属性的变化。当属性修改时，可以更新响应式对象的属性，从而触发 Vue 的响应式系统。

import { reactive } from 'vue';

export class TestClass {
  private state = 'connected';

  constructor() {
    const stateObject = reactive({ state: this.state });

    setTimeout(() => {
      stateObject.state = 'disconnected';
    }, 5000);
  }
}