对于观察者来说，正确的 Vue 3 <Setup Script/> 语法是什么？

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。