<!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><!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>Vite アプリ</title>
</head>
<本文>
<!-- webpack で作成したプロジェクトとの違いは、index.html がパブリック外に配置されることです -->
<!-- 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><テンプレート>
<h1>{ { カウンタ }}</h1>
<button @click="add">追加</button>
<ユーザー></ユーザー>
</テンプレート>
<スクリプトの設定>
// これは糖衣構文です
//セットアップのみをサポート
「./components/User.vue」からユーザーをインポートします。
//コンポーネントの導入に登録は必要ありません
「vue」から {ref} をインポートします。
カウンタ = ref(100); とします。
関数追加(){
カウンタ値++;
}
// デフォルトをエクスポート {
// 名前 : "アプリ",
// 設定（）{
// カウンタ = ref(100) とします。
// 関数 add(){
// counter.value++;
// }
// {counter,add} を返します。
// }
// }
</script>
<スタイル>
</スタイル>
<template> <h1>我是user</h1> </template> <script setup> </script><テンプレート>
<h1>私はユーザーです</h1>
</テンプレート>
<スクリプトの設定>
</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; }「vue」から {customRef} をインポートします。
デフォルト関数をエクスポート(){
// ref を自分で定義する
関数 useDebouncedRef(value){
// カスタム ref 関数本体は ref 仕様に準拠する必要があります
// CustomRef を呼び出して ref インスタンスを取得します
//customRef を呼び出すときは、コールバック関数を仮パラメータ ファクトリとして指定する必要があります
// このファクトリー関数には、トラックとトリガーという 2 つの重要なパラメーターがあります。
// トラックは追跡、トリガーはトリガーを意味します
const x = カスタムRef((トラック,トリガー)=>{
させてください。
// このファクトリ コールバック関数には戻りオブジェクトが必要です
// この戻り値には get が必要です (set は必要ありません)
戻る {
// テンプレート ステートメントがデータを使用している限り、get が自動的に呼び出されます
得る（）{
console.log("実行される");
// また、get でトラック追跡を使用して、この値の変更を Vue に通知します
追跡（）;
戻り値;
}、
// テンプレート ステートメントは、データを変更するときに自動的に set メソッドを呼び出します。
set(newValue){
console.log("実行されたセット");
// 入力が速い場合、複数の setTimeout 関数が最下層に同時に表示されます。
// ジッターの問題が発生します (画面上のコンテンツがちらついたりジャンプしたりする)
クリアタイムアウト(t);
//手ぶれ補正問題の解決に成功しました
t = setTimeout(() => {
値 = 新しい値;
// get メソッドの呼び出しをトリガーして通知します
引き金（）;
},1000);
}
}
});
x を返します。
}
let name = useDebouncedRef("");
名前を返します。
}
import {ref,watch} from "vue"; export default function(name){ let newName = ref(name.value); watch(name,(newValue) => { // 侦听属性 setTimeout(() => { newName.value = newValue; },1000); }); return newName; }「vue」から {ref,watch} をインポートします。
デフォルト関数をエクスポート(名前){
newName = ref(name.value); とします。
watch(name,(newValue) => {
// リスニングのプロパティ
setTimeout(() => {
新しい名前.値 = 新しい値;
},1000);
});
新しい名前を返します。
}