从Vue 2.0开始，现在有一种方法可以在监视器本身中完成，使用immediate: true。

• 对于在生命周期中何时运行监视器，有一个小警告，请参阅编辑。*

在使用之前，确保您确实需要一个监视器而不是一个计算属性。
计算属性有许多优点，而且通常是更好的解决方案。
只有在计算属性不足时才应使用此功能。
在原始问题的特定情况下，class的计算属性肯定会更好，但发布这篇文章只是为了防止其他人偶然发现这篇文章中的计算属性不起作用的情况（就像我一样）。
监视器可以是一个对象，而不仅仅是一个函数，并接受属性**immediate，该属性告诉vue在创建**组件时运行监视器（不同于 mounted）。
然后，运行的函数位于handler属性中。
因此，在您的示例中，您的观察者可以是：

watch: {
    value: {
        handler: function(value) {
            if (value == 'Y') {
                this.class = 'checked';
            } else {
                this.class = 'unchecked';
            }
        },
        immediate: true
    },
}

* 编辑 *

注解中指出，immediate选项在组件***创建***时触发观察器，而不是在***挂载***时触发观察器，在简单的情况下，这些可以看作是等价的。
如果你真的想为一个监视器设置run when***mount***功能，你可以简单地把你正在监视的字段设置为一些伪值，比如null或undefined，然后在mounted()钩子中初始化它。

data() {
    return {
        value: undefined
    }
},
mounted() {
    // Set value to actual initial value,
    // which will trigger the watcher
    this.value = 'Y';
},
watch: {
    value(value) {
        if (value == 'Y') {
            this.class = 'checked';
        } else {
            this.class = 'unchecked';
        }
    }
}

我想在这种情况下你最好用电脑。

computed:{
  class(){
    return this.value === 'Y' ? 'checked' : 'unchecked'
  }
}

但是如果您真的想使用一个监视器，那么可以将您在监视器中所做的代码抽象为一个方法，并从挂载中调用它。

Vue.component('check-mark', {
  name: 'check-mark',
  template: `
    <input :value="value">
  `,
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data(){
    return {
      class: null
    }
  },
  methods:{
    setClass(value){
      if (value == 'Y') {
        this.class = 'checked';
      } else {
        this.class = 'unchecked';
      } 
    }
  },
  mounted: function () {
    this.setClass(this.value)
  },
  watch: {
    value: function (value) {
      this.setClass(value)
    },
  },
});

我在使用脚本设置在Vue 3中查找时遇到了这个问题。
注意，我不想使用immediate: true选项，因为我使用的是对模板元素的引用，而该模板元素**只在挂载后存在。
因此，我使用了vue-use中的watchTriggerable实用程序
下面是你的例子：

const props = defineProps<{
    value: boolean;
}>();

const className = ref("");

onMounted(() => {
    updateClass();
});

const { trigger: updateClass } = watchTriggerable(
    () => props.value,
    () => {
        className.value = props.value ? "checked" : "unchecked";
    }
);

请️注意，在这个例子中，使用immediate: true选项就完全可以了。用一个计算机。但这是为了举例。
您需要安装并导入vue-use：

pnpm install @vueuse/core

然后使用将其导入到组件中

import { watchTriggerable } from "@vueuse/core";