<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- 和webpack创建的工程区别,index.html放在了pubic的外面 -->
    <!-- Vite以index.html作为入口,不再使用main.js作为入口了 -->
    <!-- 对于vite构建工具来说,配置文件时vite.config.js -->
    <!-- 这个vite.config.js类似于webpack打包的vue.config.js -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<template>
    <h1>{{ counter }}</h1>
    <button @click="add">加一</button>
    <User></User>
</template>
 
<script setup>
// 这是一个语法糖
// 仅支持setup
import User from "./components/User.vue";
// 引入组件即可不需要我们注册
import {ref} from "vue";
    let counter = ref(100);
    function add(){
        counter.value++;
    }
// export default {
//     name : "App",
//     setup(){
//         let counter = ref(100);
//         function add(){
//             counter.value++;
//         }
//         return {counter,add};
//     }
// }
</script>
 
<style>
 
</style>
<template>
    <h1>我是user</h1>
</template>
 
<script setup>
 
</script>
import {customRef} from "vue";
export default function(){
    // 自己定义一个ref
    function useDebouncedRef(value){
        // 自定义的ref函数体需要符合ref规范
        // 通过调用customRef来获取一个ref实例
        // 调用customRef必须要给出一个回调函数作为形参factory
        // 对于这个factory函数来说,有两个重要参数track,trigger
        // track是追踪的意思,trigger是触发的意思
        const x = customRef((track,trigger)=>{
            let t;
            // 这个factory回调函数必须有返回对象
            // 且这个返回必须有get(set非必须)
            return {
                // 模板语句只要使用到该数据,get会自动调用
                get(){
                    console.log("get执行了");
                    // 还要在get里面用track追踪告诉vue这个value发生的变化
                    track();
                    return value;
                },
                // 模板语句修改该数据会自动调用set方法
                set(newValue){
                    console.log("set执行了");
                    // 如果输入较快会导致底层同时出现多个setTimeout函数
                    // 会导致抖动问题的出现(屏幕上内容闪烁跳动)
                    clearTimeout(t);
                    // 成功解决了防抖问题
                    t = setTimeout(() => {
                        value = newValue;
                        // 触发一下即通知去调用get方法
                        trigger();
                    },1000);
                }
            }
        });
        return x;
    }
    let name = useDebouncedRef("");
    return name;
}
import {ref,watch} from "vue";
export default function(name){
    let newName = ref(name.value);
    watch(name,(newValue) => {
        // 侦听属性
        setTimeout(() => {
            newName.value = newValue;
        },1000);
    });
    return newName;
}