Vue.js 已安装的Vue触发表

我在下面有一个vue组件，我想在安装它时观察它是否触发。我该怎么做

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

Vue.component（'check-mark'{
名称：'复选标记'，
模板：`
`,
道具：{
价值：{
类型：字符串，
要求：正确，
},
},
已装入：异步函数（）{
//在此处触发this.value watch（）
},
观察：{
值：函数（值）{
如果（值='Y'）{
this.class='checked'；
}否则{
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.component（'check-mark'{
名称：'复选标记'，
模板：`
`,
道具：{
价值：{
类型：字符串，
要求：正确，
},
},
数据（）{
返回{
类别：空
}
},
方法：{
设置类（值）{
如果（值='Y'）{
this.class='checked'；
}否则{
this.class='unchecked'；
} 
}
},
挂载：函数（）{
this.setClass（this.value）
},
观察：{
值：函数（值）{
this.setClass（值）
},
},
});

从Vue 2.0开始，现在有一种方法可以在观察程序本身中使用

立即：true

对于在生命周期中何时运行watcher，有一个小警告，请参见编辑

在使用此属性之前，请确保您确实需要一个观察者，而不是一个计算属性

计算属性有许多优点，通常是更好的解决方案

仅当计算属性不足时，才应使用此功能

在原始问题的特定情况下，

class

的计算属性肯定会更好，但如果其他人偶然发现这篇文章中的计算属性不起作用（正如我所做的那样），那么就发布这篇文章

可以是一个对象而不仅仅是一个函数，并获取属性

immediate

，该属性告诉vue在创建组件时运行观察程序（不同于已安装）

然后运行的函数位于

处理程序

属性中

因此，在您的示例中，您的观察者可能是：

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

编辑 评论中指出，

立即

选项在创建组件时触发观察者，而不是在安装组件时触发观察者。在简单的情况下，可以将其视为等效的。
如果您确实想为一个观察者专门提供当挂载时运行功能，您可以简单地将您正在观察的字段设置为某个伪值，比如

null

或

未定义的

，然后在

挂载（）

钩子中实际初始化它。上述例子将变成：

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';
        }
    }
}

---

杰出的这样做有一个非常糟糕的缺点：调用时，监视的函数将在vue的挂载钩子之前被调用。这意味着任何有用的数据和属性（对于ex$refs）都无法从watch函数中看到。@stratboy可能是这样，我不确定，但即使是这样，一旦加载数据，它也会再次更新，不会？此外，这只是工具箱中的另一个工具。它可能不适用于所有用例，但肯定会适用于某些用例，因此我只是尝试将其作为一种替代方案来介绍。@scniro对于原始问题特定的案例，计算属性绝对是正确的选择，除此之外，我在被问到这个问题很久之后就回答了这个问题。询问者问到在

挂载

-这在

创建

上调用观察者。虽然这在大多数情况下都是有效的，但这并不完全相同。