feat: 更新

src/views/watch/WatchStop.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <p>
+            <select name="select" v-model="curPage">
+                <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
+            </select>
+            <button @click="watchStop">停止侦听</button>
+        </p>
+        <p>{{ res }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue'
+const options = [
+    {
+        label: "第一页",
+        value: 1
+    },
+    {
+        label: "第二页",
+        value: 2
+    },
+    {
+        label: "第三页",
+        value: 3
+    },
+    {
+        label: "第四页",
+        value: 4
+    },
+    {
+        label: "第五页",
+        value: 5
+    }
+]
+const curPage = ref(1)
+const res = ref("")
+const stop = watch(
+    curPage,
+    (newValue) => {
+        const curItem = options.filter((item) => item.value === newValue)[0]
+        res.value = `${curItem.label} 的数据`
+    }
+)
+
+const watchStop = () => {
+    stop()
+}
+
+
+
+</script>
+
+<style scoped lang="less">
+select,
+button {
+    height: 30px;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+</style>