watch:{} 和 watched(){} 在vue中使用的代码示例

下面是一个使用`watch`和`watched()`的Vue组件的示例代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    },
  },
  created() {
    console.log("Component created");
  },
  mounted() {
    console.log("Component mounted");
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在这个示例中，我们定义了一个计数器组件，其中使用了`watch`和`watched()`。

`watch`用于监视`count`数据对象的变化，并在其变化时打印一条消息。`watched()`用于在组件创建时打印一条消息和在组件挂载时打印一条消息。

当我们点击“Increment”按钮时，计数器将递增。这将导致`watch`触发并打印消息。

您可以在浏览器的控制台中查看组件的生命周期和`watch`的输出。