什么是正确的 Vue 3<Player 的设置脚本/> 语法？

Question

什么是合适的Vue 3语法观察者?文档中似乎省略了它。我对这里的新功能感到非常兴奋:https://vuejs.org/guide/essentials/watchers.html#deep-watchers但是预期的语法是什么?

Answer 1

这是一个基本的脚本设置语法中的手表示例:

<template>
<div>
<input type="text" v-model="user.name" placeholder="Name" />
<input type="text" v-model="user.lastname" placeholder="Lastname" />
{{ nameUpdatesCount }}
</div>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
const user = reactive({ name: "", lastname: "" });
const nameUpdatesCount = ref(0);
const increaseNameUpdatesCount = () => {
nameUpdatesCount.value++;
};
watch(user, (newValue, oldValue) => {
console.log(newValue, oldValue);
increaseNameUpdatesCount();
});
</script>

在上面的示例中，每当在输入中写入或删除某些内容时，都会触发监视程序。这是因为name属性改变了它的值。之后，调用increaseNameUpdatesCount方法，您将看到nameUpdatesCount加1。