【发布时间】：2020-03-26 07:04:39
【问题描述】：
虽然Vue Composition API RFC Reference site 有很多使用watch 模块的高级使用场景，但没有关于如何观看组件道具的示例？
Vue Composition API RFC's main page 或 vuejs/composition-api in Github 均未提及。
我创建了一个Codesandbox 来详细说明这个问题。
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<br>
<p>Prop watch demo with select input using v-model:</p>
<PropWatchDemo :selected="testValue"/>
</div>
</template>
<script>
import { createComponent, onMounted, ref } from "@vue/composition-api";
import PropWatchDemo from "./components/PropWatchDemo.vue";
export default createComponent({
name: "App",
components: {
PropWatchDemo
},
setup: (props, context) => {
const testValue = ref("initial");
onMounted(() => {
setTimeout(() => {
console.log("Changing input prop value after 3s delay");
testValue.value = "changed";
// This value change does not trigger watchers?
}, 3000);
});
return {
testValue
};
}
});
</script>
<template>
<select v-model="selected">
<option value="null">null value</option>
<option value>Empty value</option>
</select>
</template>
<script>
import { createComponent, watch } from "@vue/composition-api";
export default createComponent({
name: "MyInput",
props: {
selected: {
type: [String, Number],
required: true
}
},
setup(props) {
console.log("Setup props:", props);
watch((first, second) => {
console.log("Watch function called with args:", first, second);
// First arg function registerCleanup, second is undefined
});
// watch(props, (first, second) => {
// console.log("Watch props function called with args:", first, second);
// // Logs error:
// // Failed watching path: "[object Object]" Watcher only accepts simple
// // dot-delimited paths. For full control, use a function instead.
// })
watch(props.selected, (first, second) => {
console.log(
"Watch props.selected function called with args:",
first,
second
);
// Both props are undefined so its just a bare callback func to be run
});
return {};
}
});
</script>
编辑：虽然我的问题和代码示例最初使用的是 JavaScript，但实际上我使用的是 TypeScript。托尼汤姆的第一个答案虽然有效，但会导致类型错误。 Michal Levý的回答解决了这个问题。所以我后来用typescript标记了这个问题。
EDIT2：这是我在 bootstrap-vue 的 <b-form-select> 之上的这个自定义选择组件的反应布线的抛光但准系统版本（否则不可知论实现，但这个底层组件确实会发出 @input 和 @change 事件，这取决于更改是通过编程方式还是通过用户交互进行的）。
<template>
<b-form-select
v-model="selected"
:options="{}"
@input="handleSelection('input', $event)"
@change="handleSelection('change', $event)"
/>
</template>
<script lang="ts">
import {
createComponent, SetupContext, Ref, ref, watch, computed,
} from '@vue/composition-api';
interface Props {
value?: string | number | boolean;
}
export default createComponent({
name: 'CustomSelect',
props: {
value: {
type: [String, Number, Boolean],
required: false, // Accepts null and undefined as well
},
},
setup(props: Props, context: SetupContext) {
// Create a Ref from prop, as two-way binding is allowed only with sync -modifier,
// with passing prop in parent and explicitly emitting update event on child:
// Ref: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
// Ref: https://medium.com/@jithilmt/vue-js-2-two-way-data-binding-in-parent-and-child-components-1cd271c501ba
const selected: Ref<Props['value']> = ref(props.value);
const handleSelection = function emitUpdate(type: 'input' | 'change', value: Props['value']) {
// For sync -modifier where 'value' is the prop name
context.emit('update:value', value);
// For @input and/or @change event propagation
// @input emitted by the select component when value changed <programmatically>
// @change AND @input both emitted on <user interaction>
context.emit(type, value);
};
// Watch prop value change and assign to value 'selected' Ref
watch(() => props.value, (newValue: Props['value']) => {
selected.value = newValue;
});
return {
selected,
handleSelection,
};
},
});
</script>
【问题讨论】：
-
为什么你不能在你带入
setup函数的props上使用watch？首先将它们变成`Refs，基本上制作一个响应式副本，它应该会在后续更改时触发。 -
这不是正确的问题。我们不应该在 Vue 中观看道具！你不能像我们在 Vue 2 中那样解构 props 的事实似乎是倒退了一大步。请参阅“toRefs”（以及将来的“toRef”），了解如何避免这种为了设置另一个值而查看道具的反模式。
-
标签： javascript typescript vue.js vuejs3 vue-composition-api