vue3

20.vue3/project3/src/Demo1.vue

@@ -0,0 +1,19 @@
+
+<template>
+  <div>
+    <h1 class="text-5xl">{{ searchKey }}</h1>
+    {{ a }}
+    <input type="text" class="border" v-model="searchKey" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useDebounceRef } from "./hooks/useDebounceRef";
+// let a = ref(0);
+// a.value = 12;
+let searchKey = useDebounceRef("", 500);
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/hooks/useDebounceRef.ts

@@ -0,0 +1,50 @@
+import { customRef } from "vue";
+// 自定义响应性 Ref 函数
+// track(收集依赖) tigger(触发视图更新)
+
+
+// 封装防抖
+export function useDebounceRef<T>(value: T, delay: number) {
+    let timer: any = null;
+    return customRef((track, trigger) => {
+        return {
+            get() {
+                // 告诉Vue模版 当前组件模版依赖的数据
+                // Vue就会把当前渲染的函数存入该变量的依赖池
+                // 后续调用trigger时  Vue就会自动执行所有依赖变量的渲染原理 更新页面
+                track();
+                return value;
+            },
+            set(newVal: T) {
+                if (timer) clearTimeout(timer);
+                timer = setTimeout(function () {
+                    // 将数据更新成最新的值
+                    value = newVal;
+                    trigger();
+                    // 当值真正发生改变时所触发的依赖
+                }, delay)
+
+            }
+        }
+    })
+}
+// customRef((track, trigger) => {
+//     return {
+//         get() {
+//             track();
+//              调用时机在get()里执行 当模版/计算属性读取你自定义的ref时 他就默认进入了get;
+//              当执行track,相当于告诉Vue,当前正在页面渲染这个数据，Vue此时会把当前渲染副作用函数放到该变量的依赖池中
+//             return value;
+//         },
+//         set(newVal: T) {
+//             value = newVal;
+//            调用时机：数据真正发生变化后 才会调用tigger
+//              Vue会遍历所有收集的依赖，重新执行页面渲染 更新视图  
+//             trigger();
+//         }
+//     }
+// })
+
+// 流程
+// 模版读取 => get() => track() 收集依赖
+// ref.value = xx; => set() => 业务逻辑 => 更新数据 => trigger() => 视图更新

20.vue3/project3/src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './shallowReadonly.vue'
+import App from './Demo1.vue'
 import router from './router'
 const app = createApp(App)
 

20.vue3/project3/src/toRaw_markRaw.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">toRaw&&markRaw</h1>
+    <!-- toRaw：用于获取一个响应式对象的原始对象 toRaw返回的对象不再是响应式 不会触发视图更新 -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, toRaw, markRaw } from "vue";
+let user = reactive({
+  name: "图图",
+  age: 3,
+});
+let user1 = toRaw(user);
+
+console.log(user, "user");
+console.log(user1, "user1");
+// markRaw:标记一个对象永远不会变成响应式
+let list = markRaw([
+  {
+    name: "孙悟空",
+    age: 100,
+  },
+  {
+    name: "猪八戒",
+    age: 50,
+  },
+]);
+let list1 = reactive(list);
+console.log(list, "list");
+console.log(list1, "list1");
+</script>
+
+<style lang="scss" scoped>
+</style>