Vue 触发器手表安装在支架上

Question

我下面有一个 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';
}
},
},
});

Answer 1

从 Vue 2.0 开始，现在有一种方法可以在观察器本身中做到这一点，使用immediate: true.
有一个小警告，在生命周期中何时运行观察器，请参阅编辑。

在使用它之前，请确保确实需要观察程序而不是计算属性。

计算属性有很多优点，而且它们通常是更好的解决方案。

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

在原始问题的特定情况下，class的计算属性肯定会更好，但发布此内容只是以防其他人偶然发现这篇文章，其中计算属性不会做(就像我一样(。

观察者可以是一个对象，而不仅仅是一个函数，并获取属性immediate，告诉 vue 在创建组件时运行观察器(不同于挂载(。

然后，运行的函数位于handler属性中。

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

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

编辑

评论中指出，immediate选项在创建组件时触发观察程序，而不是在挂载时触发观察程序。在简单的情况下，这些可以看作是等效的.
如果你真的想要为观察者挂载时运行功能，你可以简单地让你正在监视的字段是一些虚拟值，比如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';
}
}
}

Answer 2

我认为在这种情况下，计算可能会更好地为您服务。

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

但是，如果您确实想使用观察程序，请将您在监视中执行的代码抽象为一个方法，并从mounted调用它。

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)
},
},
});

Answer 3

我在Vue3中使用脚本设置查找时遇到了这个问题。

请注意，我不想使用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";