vue3

15.vue3/project2/src/CustomRef/Home.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="home">
+    <h1>首页</h1>
+    <img
+      src="https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg"
+      alt=""
+    />
+    <input v-model='msg' />
+    <hr>
+    {{msg}}
+    <!-- <Child/> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import newRefs from './useFreeRef.ts';
+let {msg} = newRefs('哈哈',2000)
+console.log(msg)
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 500px;
+  height: 500px;
+  background: yellow;
+  img {
+    width: 300px;
+    height: 300px;
+  }
+}
+</style>

15.vue3/project2/src/CustomRef/useFreeRef.ts

@@ -0,0 +1,23 @@
+import { customRef } from 'vue'
+
+export default function(value:string,delay:number) {
+    let timer:number;
+    let msg = customRef((track, trigger)=>{
+        return {
+            get() {
+                track();
+                return value;
+            },
+            set(val) {
+            clearTimeout(timer)
+               timer = setTimeout(()=>{
+                    value = val;
+                    trigger();
+                },delay)
+            }         
+        }
+    })
+    return {msg}
+}
+
+

15.vue3/project2/src/Home.vue → 15.vue3/project2/src/Suspense/Home.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref, reactive } from "vue";
-import Child from "./Child.vue";
+import Child from "../Suspense/Child.vue";
 </script>
 <style lang="scss" scoped>
 .home {

15.vue3/project2/src/main.ts

@@ -3,7 +3,9 @@ import router from './router'
 // import App from './App.vue'
 // import App from './shallowRef-shallowReactive.vue'
 // import App from './shallowReadonly-readonly.vue'
-import App from './Home.vue'
+// import App from './Suspense/Home.vue'
+// import App from './toRaw-markRaw.vue'
+import App from './CustomRef/Home.vue'
 
 import './assets/book.css'
 // createApp(App).use(router).mount('#app')

15.vue3/project2/src/toRaw-markRaw.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>toRaw-markRaw</h1>
+    <h3>姓名:{{newPerson.name}}</h3>
+    <h3>年龄:{{person.age}}</h3>
+    <button @click='change1'>修改姓名</button>
+    <button @click='change2'>修改年龄</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive,toRaw,markRaw} from 'vue'
+let person = reactive({
+  name:"孙悟空",
+  age:10
+})
+let newPerson = toRaw(person);
+let obj = markRaw({
+  a:"10",
+  b: true
+})
+let obj1 = reactive(obj)
+console.log(obj,obj1)
+function change1() {
+  newPerson.name = '哪吒'
+}
+
+</script>
+<style lang='scss' scoped>
+
+</style>