feat:更新

src/views/watch/WatchBase.vue

@@ -5,12 +5,13 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { watch, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -32,17 +33,17 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const res = ref("")
+];
+const curPage = ref(1);
+const res = ref("");
 watch(
     curPage,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        res.value = `${curItem.label} 的数据`
-    },
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
+    }
     // {immediate: true}
-)
+);
 
 </script>
 

src/views/watch/WatchCallback.vue

@@ -16,19 +16,19 @@
 <script setup lang="ts">
 import { 
     ref,
-    watchEffect, 
+    watchEffect 
     // watchPostEffect
-} from 'vue'
-const listDom = ref<HTMLDivElement>()
-const resDom = ref<HTMLDivElement>()
-const selectElement = ref(3)
+} from "vue";
+const listDom = ref<HTMLDivElement>();
+const resDom = ref<HTMLDivElement>();
+const selectElement = ref(3);
 
 watchEffect(() => {
-    const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
-    resDom.value.append(selectElem)
+    const selectElem = listDom?.value?.querySelectorAll("p")[selectElement.value];
+    if(selectElem) resDom?.value?.append(selectElem);
 }, {
-    flush: 'post'
-})
+    flush: "post"
+});
 
 // watchPostEffect(() => {
 //     const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]

src/views/watch/WatchEffectBase.vue

@@ -5,13 +5,15 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>watch: {{ watchRes }}</p>
+        <br />
         <p>watchEffect: {{ watchEffectRes }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, watchEffect, ref } from 'vue'
+import { watch, watchEffect, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,21 +35,21 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const watchRes = ref("")
+];
+const curPage = ref(1);
+const watchRes = ref("");
 watch(
     curPage,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        watchRes.value = `${curItem.label} 的数据`
-    },
-)
-const watchEffectRes = ref("")
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        watchRes.value = `${curItem.label} 的数据`;
+    }
+);
+const watchEffectRes = ref("");
 watchEffect(() => {
-    const curItem = options.filter((item) => item.value === curPage.value)[0]
-    watchEffectRes.value = `${curItem.label} 的数据`
-})
+    const curItem = options.filter((item) => item.value === curPage.value)[0];
+    watchEffectRes.value = `${curItem.label} 的数据`;
+});
 
 </script>
 

src/views/watch/WatchEffectInvalidate.vue

@@ -5,12 +5,13 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>{{ watchEffectRes }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref } from 'vue'
+import { watchEffect, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -32,17 +33,17 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const watchEffectRes = ref("")
+];
+const curPage = ref(1);
+const watchEffectRes = ref("");
 watchEffect((onInvalidate) => {
-    const curItem = options.filter((item) => item.value === curPage.value)[0]
-    watchEffectRes.value = `${curItem.label} 的数据`
-    console.log('watchEffect副作用函数执行了！')
+    const curItem = options.filter((item) => item.value === curPage.value)[0];
+    watchEffectRes.value = `${curItem.label} 的数据`;
+    console.log("watchEffect副作用函数执行了！");
     onInvalidate(() => {
-        console.log("onInvalidate清除副作用函数执行了！")
-    })
-})
+        console.log("onInvalidate清除副作用函数执行了！");
+    });
+});
 
 
 

src/views/watch/WatchReactive.vue

@@ -6,12 +6,13 @@
             </select>
             <!-- <input type="number" v-model="curPage.limit" />  -->
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, reactive, ref } from 'vue'
+import { watch, reactive, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,23 +34,23 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
+];
 const curPage = reactive({
     page: 1,
     limit: 10
-})
-const res = ref("")
+});
+const res = ref("");
 watch(
     // curPage.page,
     () => curPage.page,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        res.value = `${curItem.label} 的数据`
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
     },
     {
         immediate: true
     }
-)
+);
 
 // watch(
 //     () => curPage,

src/views/watch/WatchStop.vue

@@ -6,12 +6,13 @@
             </select>
             <button @click="watchStop">停止侦听</button>
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { watch, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,20 +34,20 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const res = ref("")
+];
+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 curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
     }
-)
+);
 
 const watchStop = () => {
-    stop()
-}
+    stop();
+};