Vue 3外部Vanilla JS状态响应性失效问题求助

问题背景 #

采用框架无关开发模式：将单元测试、数据获取等核心逻辑放在Vanilla JS中，仅用Vue处理渲染。在Vue2.6+组合API中，通过useMyObject风格函数将Vanilla JS对象转为响应式状态，操作绑定Vanilla JS控制器，模板绑定响应式状态的方式运行正常，但迁移到Vue3后，修改状态后模板无法即时更新，需等待下一次触发渲染（如修改绑定ref的输入框）才会同步。

根因分析 #

Vue2与Vue3的响应式实现机制存在本质差异：

• Vue2基于Object.defineProperty，会直接修改原始对象的属性，添加拦截的getter/setter，因此操作原始对象的属性也能触发响应式更新。
• Vue3基于Proxy，仅对reactive返回的包装对象生效，原始Vanilla JS对象的修改不会经过Proxy拦截，自然无法触发模板更新。

之前的代码中，useNickController里虽然将controller.state用reactive包装，但控制器的addPerson方法操作的是原始的controller.state，而非包装后的响应式对象，因此Vue3无法感知到状态变化。

解决方案 #

方案1：让控制器操作响应式包装后的状态 #

重写useNickController，让控制器的方法直接操作响应式状态，而非原始对象：

// useNickController.ts
import { reactive } from 'vue'
import { factoryNickController, type Person, type NickControllerState } from './nick-controller'

let addPersonCounter = 0

export function useNickController() {
  const controller = factoryNickController()
  // 将原始state转为响应式对象
  const reactiveState = reactive<NickControllerState>(controller.state)

  // 重写addPerson方法，操作响应式状态
  const addPerson = (person: Person) => {
    reactiveState.people.push(person)
    reactiveState.isoTimeStamp = new Date().toISOString()
  }

  function addTestPerson() {
    addPersonCounter++
    const random5DigitNumber = Math.floor(10000 + Math.random() * 90000)
    const person: Person = {
      id: addPersonCounter,
      firstName: 'Nick_' + addPersonCounter.toString(),
      lastName: 'Benz_' + addPersonCounter.toString(),
      age: 50,
      address: {
        line1: '123 Main St',
        line2: '',
        city: 'Denver',
        state: 'CO',
        zip: random5DigitNumber.toString()
      }
    }
    addPerson(person)
  }

  return {
    state: reactiveState,
    addTestPerson
  }
}

方案2：让控制器接收响应式状态作为入参 #

修改Vanilla JS控制器，允许传入外部状态，直接使用响应式对象作为控制器的状态源：

// nick-controller.ts
export interface Person {
  id: number
  firstName: string
  lastName: string
  age: number
  address: {
    line1: string
    line2: string
    city: string
    state: string
    zip: string
  }
}

export interface NickControllerState {
  people: Person[]
  personEditing: Person
  isoTimeStamp: string
}

// 新增入参，允许传入外部state
export function factoryNickController(initialState?: NickControllerState) {
  const state: NickControllerState = initialState || {
    people: [],
    personEditing: {
      id: 0,
      firstName: '',
      lastName: '',
      age: 0,
      address: {
        line1: '',
        line2: '',
        city: '',
        state: '',
        zip: ''
      }
    },
    isoTimeStamp: ''
  }

  function addPerson(person: Person) {
    state.people.push(person)
    state.isoTimeStamp = new Date().toISOString()
  }

  return {
    state,
    addPerson
  }
}

// useNickController.ts
import { reactive } from 'vue'
import { factoryNickController, type Person } from './nick-controller'

let addPersonCounter = 0

export function useNickController() {
  // 先创建响应式状态
  const reactiveState = reactive({
    people: [],
    personEditing: {
      id: 0,
      firstName: '',
      lastName: '',
      age: 0,
      address: {
        line1: '',
        line2: '',
        city: '',
        state: '',
        zip: ''
      }
    },
    isoTimeStamp: ''
  })
  // 将响应式状态传入控制器
  const controller = factoryNickController(reactiveState)

  function addTestPerson() {
    addPersonCounter++
    const random5DigitNumber = Math.floor(10000 + Math.random() * 90000)
    const person: Person = {
      id: addPersonCounter,
      firstName: 'Nick_' + addPersonCounter.toString(),
      lastName: 'Benz_' + addPersonCounter.toString(),
      age: 50,
      address: {
        line1: '123 Main St',
        line2: '',
        city: 'Denver',
        state: 'CO',
        zip: random5DigitNumber.toString()
      }
    }
    controller.addPerson(person)
  }

  return {
    state: reactiveState,
    controller,
    addTestPerson
  }
}

方案3：针对数组的特殊处理（仅适用于数组更新场景） #

如果仅需解决数组people的更新问题，可以将数组用ref包装，修改时通过value操作：

// useNickController.ts
import { ref } from 'vue'
import { factoryNickController, type Person } from './nick-controller'

let addPersonCounter = 0

export function useNickController() {
  const controller = factoryNickController()
  // 将people数组转为ref响应式对象
  const people = ref(controller.state.people)

  function addTestPerson() {
    addPersonCounter++
    const random5DigitNumber = Math.floor(10000 + Math.random() * 90000)
    const person: Person = {
      id: addPersonCounter,
      firstName: 'Nick_' + addPersonCounter.toString(),
      lastName: 'Benz_' + addPersonCounter.toString(),
      age: 50,
      address: {
        line1: '123 Main St',
        line2: '',
        city: 'Denver',
        state: 'CO',
        zip: random5DigitNumber.toString()
      }
    }
    // 操作ref的value触发更新
    people.value.push(person)
    controller.state.isoTimeStamp = new Date().toISOString()
  }

  return {
    people,
    addTestPerson,
    state: controller.state
  }
}

组件模板中直接绑定people即可：

<template>
  <div>
    <button @click="nickController.addTestPerson()">Add</button>
    <ul v-for="person in nickController.people" :key="person.id">
      <li>id: {{ person.id + person.firstName + '-' + person.lastName }}</li>
    </ul>
  </div>
</template>

验证效果 #

采用上述任一方案后，点击"Add"按钮添加人员时，模板会即时渲染新的列表项，无需等待额外的触发操作。

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