Vue3+TypeScript监听Model属性出现警告，如何消除？

你遇到的控制台警告，核心原因是watch接收到的监听源是原始值false，而非预期的ref对象。这是因为在普通类的构造函数中直接调用Vue的watch API时，脱离了Vue的响应式上下文，导致watch无法正确识别ref对象，反而读取了它的原始值。

方法1：将监听逻辑移至组件响应式上下文 #

把监听代码从模型类的构造函数中移出，放到组件的setup函数（或<script setup>）内执行，确保在Vue的响应式上下文中运行：

// Resa.ts 模型类
import { ref, Ref } from 'vue'

export default class Resa {
  public id: number = 0
  public deferred_invoicing: Ref<boolean> = ref(false)

  constructor(properties?: Partial<Resa>) {
    Object.assign(this, properties)
  }
}

// 组件中使用
import { watch } from 'vue'
import Resa from './Resa'

const resa = new Resa()
watch(resa.deferred_invoicing, (newValue) => {
  console.log(newValue)
})

方法2：在模型类内使用getter函数作为监听源 #

如果必须在模型类内部实现监听，将watch的源改为返回ref值的getter函数，同时确保模型实例在Vue的响应式上下文（如组件）中使用：

import { watch, ref, Ref } from 'vue'

export default class Resa {
  public id: number = 0
  public deferred_invoicing: Ref<boolean> = ref(false)

  constructor(properties?: Partial<Resa>) {
    Object.assign(this, properties)
    // 用getter函数作为watch的监听源
    watch(() => this.deferred_invoicing.value, (newValue) => {
      console.log(newValue)
    })
  }
}

方法3：改用类组件装饰器（基于vue-class-component） #

如果你的项目采用类组件开发，使用@Watch装饰器替代手动调用watch函数，这是类组件的标准写法：

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class Resa extends Vue {
  public id: number = 0
  public deferred_invoicing: boolean = false

  @Watch('deferred_invoicing')
  onDeferredInvoicingChange(newValue: boolean) {
    console.log(newValue)
  }
}

你之前尝试用字符串'deferred_invoicing'作为监听源无效，是因为watch在非类组件的上下文中无法识别字符串形式的属性路径，只有类组件的装饰器或选项式API支持这种写法。

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