Vue3.0+ts—watch使用【TypeScript】
在Vue 3.0和TypeScript中，watch可以用来观察响应式数据的变化。以下是一个简单的例子，展示如何在Vue组件中使用watch来响应数据的变化。
<template>
<div>
<input v-model="message" />
<p>Message is: {{ message }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
setup() {
const message = ref<string>('');
watch(message, (newValue, oldValue) => {
console.log(`Message changed from "${oldValue}" to "${newValue}"`);
});
return {
message,
};
},
});
</script>在这个例子中，我们创建了一个响应式的message变量，并使用watch来监听它的变化。每当message变化时，watch的回调函数就会被调用，并输出新旧值的变化信息。
评论已关闭