<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
 import { ref } from "vue";
 let keyword = ref("itclanCoder"); // Vue官方提供的ref函數(shù),返回一個(gè)響應(yīng)式數(shù)據(jù)
</script>

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from 'vue';      
// 自定義的一個(gè)ref,名為myRef,自定義ref就是一個(gè)函數(shù)
function myRef(value) {
  // 自定義,自己得寫邏輯,customRef必須要傳入一個(gè)函數(shù),而且函數(shù)里面必須要返回一個(gè)對(duì)象
  return  customRef((track,trigger) => {  // 第一個(gè)return 是把自定義的內(nèi)容返回出去,第二個(gè)return 是返回里面的邏輯,返回get,和set
    return {  
        get() {  // 讀取數(shù)據(jù),這個(gè)value是初始化傳遞過來的數(shù)據(jù)
            console.log('get',`${value}`);
            track(); // 追蹤一下數(shù)據(jù)的改變,通知vue最終value數(shù)據(jù)的變化,提前和get溝通一下,讓value是有作用的
            return value
        },
        set(newValue) { // 設(shè)置數(shù)據(jù),新的值,修改數(shù)據(jù)
           value = newValue;
           trigger(); // customRef函數(shù)內(nèi)接收兩個(gè)參數(shù),一個(gè)是track,另一個(gè)就是trigger,通知vue去重新解析模板
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定義一個(gè)ref
</script>

set(newValue) {
    setTimeout(() => {
        value = newValue;
        trigger(); // 通知vue去重新解析模板
    },500)
}

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from 'vue';      
// 自定義的一個(gè)ref,名為myRef,自定義ref就是一個(gè)函數(shù)
function myRef(value) {
  let timer;  // 開啟一個(gè)定時(shí)器  
  // 自定義,自己得寫邏輯,customRef必須要傳入一個(gè)函數(shù),而且函數(shù)里面必須要返回一個(gè)對(duì)象
  return  customRef((track,trigger) => {  // 第一個(gè)return 是把自定義的內(nèi)容返回出去,第二個(gè)return 是返回里面的邏輯,返回get,和set
    return {  
        get() {  // 讀取數(shù)據(jù),這個(gè)value是初始化傳遞過來的數(shù)據(jù)
            console.log('get',`${value}`);
            track(); // 追蹤一下數(shù)據(jù)的改變,通知vue最終value數(shù)據(jù)的變化,提前和get溝通一下,讓value是有作用的
            return value
        },
        set(newValue) { // 設(shè)置數(shù)據(jù),新的值,修改數(shù)據(jù)
           clearInterval(timer);  // 先清除定時(shí)器,在開
           timer = setTimeout(() => {
              value = newValue;
              trigger(); // customRef函數(shù)內(nèi)接收兩個(gè)參數(shù),一個(gè)是track,另一個(gè)就是trigger,通知vue去重新解析模板
           },500)
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定義一個(gè)ref
</script>