customRef

20_脚手架/vue3_test/17.src_customRef/App.vue

@@ -0,0 +1,44 @@
+<template>
+  <input type="text" v-model="keyWord">
+  <h3>{{keyWord}}</h3>
+</template>
+
+<script>
+import {ref, customRef} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 自定义ref
+    function myRef(value) {
+      let timer
+      // console.log('---myRef---', value)
+      return customRef((track,trigger)=>{
+        return {
+          get() {
+            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
+            track()  // 通知vue追踪数据变化
+            return value
+          },
+          set(newValue) {
+            console.log(`有人从myRef这个容器中数据改为了：${newValue}`)
+            clearTimeout(timer)
+            timer = setTimeout(()=>{
+              value = newValue
+              trigger()  //通知vue去重新解析模板
+            }, 500)
+          }
+        }
+      })
+    }
+
+    // let keyWord = ref('hello')  // 使用默认的ref
+    let keyWord = myRef('hello')
+
+    return {
+      keyWord,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/17.src_customRef/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,20 +1,42 @@
 <template>
-  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <input type="text" v-model="keyWord">
-  <Demo v-if="isShowDemo"/>
+  <h3>{{keyWord}}</h3>
 </template>
 
 <script>
-import {ref} from "vue";
+import {ref, customRef} from "vue";
-import Demo from "@/components/demo.vue";
 
 export default {
   name: 'App',
-  components: {Demo},
   setup() {
-    let isShowDemo = ref(true)
+    // 自定义ref
+    function myRef(value) {
+      let timer
+      // console.log('---myRef---', value)
+      return customRef((track,trigger)=>{
+        return {
+          get() {
+            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
+            track()  // 通知vue追踪数据变化
+            return value
+          },
+          set(newValue) {
+            console.log(`有人从myRef这个容器中数据改为了：${newValue}`)
+            clearTimeout(timer)
+            timer = setTimeout(()=>{
+              value = newValue
+              trigger()  //通知vue去重新解析模板
+            }, 500)
+          }
+        }
+      })
+    }
+
+    // let keyWord = ref('hello')  // 使用默认的ref
+    let keyWord = myRef('hello')
 
     return {
-      isShowDemo,
+      keyWord,
     }
   }
 

20_脚手架/vue3_test/src/components/demo.vue

@@ -1,62 +0,0 @@
-<template>
-  <h4>当前求和为： {{ sum }}</h4>
-  <button @click="sum++">点击+1</button>
-  <h2>姓名：{{ name }}</h2>
-  <h2>年龄：{{ age }}</h2>
-  <h2>薪资：{{ job.j1.salary }}</h2>
-  <h3 v-show="person.car">车辆信息：{{ person.car }}</h3>
-  <button @click="name+='~'">修改姓名</button>
-  <button @click="age++">修改年龄</button>
-  <button @click="job.j1.salary++">修改薪资</button>
-  <button @click="showRawPerson">输出最原始的person</button>
-  <button @click="addCar">给人添加一台车</button>
-  <button v-show="person.car" @click="person.car.name += '!'">修改车名</button>
-  <button v-show="person.car" @click="changeCarPrice">修改价格</button>
-</template>
-
-<script>
-import {reactive, ref, toRefs, toRaw, markRaw} from "vue";
-
-export default {
-  name: 'Demo',
-
-  setup() {
-    let sum = ref(0)
-    let person = reactive({
-      name: '张三',
-      age: 18,
-      job: {
-        j1: {
-          salary: 20
-        }
-      }
-    })
-
-    function showRawPerson() {
-      console.log(person)
-      const p = toRaw(person)
-      console.log(p)
-    }
-    function addCar() {
-      let car = {name:'奔驰', price:40}
-      // person.car = car
-      person.car = markRaw(car)
-      console.log(person)
-    }
-
-    function changeCarPrice() {
-      person.car.price++
-      console.log(person.car.price)
-    }
-
-    return {
-      sum,
-      person,
-      ...toRefs(person),
-      showRawPerson,
-      addCar,
-      changeCarPrice
-    }
-  }
-}
-</script>