如何在Composition API+TypeScript中重置/清空interface定义的响应式属性

失效原因 #

Vue的reactive API返回的是被Proxy代理的响应式对象，你原写法直接将campaign变量重新赋值为普通对象，等于丢弃了原来的Proxy引用，模板绑定的还是初始返回的响应式对象，自然不会触发视图更新。同时你定义的Campaign接口属性类型为string，直接赋值null也会触发TS类型报错，需要先调整类型定义。

正确实现方案 #

方案1：直接修改响应式对象属性（适合字段少的场景） #

不要替换整个reactive对象，直接修改内部属性即可保留响应性：

// 先调整接口，允许属性为null
interface Campaign {
  name: string | null,
  points: string | null,
}

const clearFields = () => {
  campaign.name = null;
  campaign.points = null;
};

方案2：用Object.assign批量覆盖属性（适合字段多的场景） #

如果对象字段较多，不想逐个写赋值语句，可以用Object.assign把空值批量覆盖到原响应式对象上：

const clearFields = () => {
  Object.assign(campaign, {
    name: null,
    points: null
  });
};

方案3：改用ref包裹对象（习惯整体赋值写法推荐） #

如果你更习惯整体替换对象的写法，可以改用ref API，修改.value时会自动触发响应式更新，原有模板代码不需要调整（Vue会自动解包ref）：

import { ref } from 'vue'

setup() {
  const campaign = ref<Campaign>({
    name: 'John Doe',
    points: '300',
  });

  const clearFields = () => {
    campaign.value = {
      name: null,
      points: null
    };
  };

  return { campaign, clearFields }
}

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