序文前回、フロントエンドのアーリーチャットカンファレンスを観ていたとき、YouさんがまたもやVueUseというライブラリについて言及していました。 好奇心からクリックして見てみました。わあ、私もまさにそんな感じです。これは私がかつてフックライブラリの Vue バージョンを自分で書きたかったことではないでしょうか? (vue3 と hooks は似すぎていると思うので) でもまだあまり得意ではないし、夢が打ち砕かれてしまいました。一緒に見ていきましょう! VueUseの作者Anthony FuがコンポーザブルVueを公開 VueUseとはVueUse は Vue.use ではありません。これは、Vue 2 および 3 に対応する Vue Composition API の共通ツール セットです。これは、この種のライブラリの中では世界で最も評価の高いものの 1 つです。当初の目的は、もともとレスポンシブ性をサポートしていなかったすべての JS API をレスポンシブにし、プログラマーが関連するコードを自分で書く手間を省くことでした。 VueUse は、Composition API に基づくユーティリティ関数のコレクションです。簡単に言えば、これは、いくつかの一般的な機能をすばやく実装して、自分で機能を作成して反復的な作業内容を解決する必要がないようにするツール機能パッケージです。そして、機会構成 API がカプセル化されます。 vue3 をより快適に使いこなせるようになります。 使いやすいVueUseをインストールする npm と @vueuse/core Vueを使用する // インポート import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core' エクスポートデフォルト{ 設定() { // マウスの位置を追跡する 定数 { x, y } = マウスを使う() // ユーザーはダークテーマを好むか 定数isDark = usePreferredDark() // 状態をlocalStorageに保持する const ストア = useLocalStorage( 「マイストレージ」、 { 名前: 'Apple'、 色: '赤'、 }, ) { x, y, isDark, store } を返します } } 上記の VueUse から、useMouse、usePreferredDark、useLocalStorage の 3 つの関数がインポートされます。 useMouse は、現在のマウス座標を監視するメソッドです。マウスの現在の位置をリアルタイムで取得します。 usePreferredDark は、ユーザーが暗い色を好むかどうかを判断する方法です。ユーザーが暗いテーマを好むかどうかをリアルタイムで判断します。 useLocalStorage は、データを永続化するために使用されるメソッドであり、データをローカル ストレージに永続化します。 おなじみの手ぶれ補正やスロットル機能もあります'@vueuse/core' から { throttleFilter、debounceFilter、useLocalStorage、useMouse } をインポートします。 // スロットル方式で localStorage の値を変更します const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) }) // 100ms後にマウスの位置を更新します const { x, y } = useMouse({ eventFilter: debounceFilter(100) }) コンポーネントで使用される関数もあります <スクリプトの設定> 'vue' から { ref } をインポートします '@vueuse/core' から { onClickOutside } をインポートします。 定数el = ref() 関数close(){ /* ... */ } onClickOutside(el, 閉じる) </スクリプト> <テンプレート> <div ref="el"> 私の外側をクリック </div> </テンプレート> 上記の例では、要素の外側をクリックしたときにコールバック関数をトリガーする onClickOutside 関数が使用されています。これが close 関数です。コンポーネントでの使用方法は次のとおりです <スクリプトの設定> '@vueuse/components' から { OnClickOutside } をインポートします。 関数close(){ /* ... */ } </スクリプト> <テンプレート> <OnClickOutside @trigger="閉じる"> <div> 私の外側をクリック </div> </OnClickOutside> </テンプレート> 注意⚠️ ここでの OnClickOutside 関数は関数ではなくコンポーネントです。 package.json に @vueuse/components がインストールされている必要があります。 グローバル状態を共有する機能もある//ストア.js '@vueuse/core' から { createGlobalState, useStorage } をインポートします。 エクスポートconst useGlobalState = createGlobalState( () => useStorage('vue-use-local-storage'), ) //コンポーネント.js './store' から {useGlobalState} をインポートします。 エクスポートデフォルトdefineComponent({ 設定() { 定数状態 = useGlobalState() {状態}を返す }, }) これは単純な状態共有です。少し拡大します。パラメータを渡すことでストアの値を変更できます。 フェッチに関しては、以下は簡単なリクエストです。 '@vueuse/core' から { useFetch } をインポートします。 const { isFetching、エラー、データ } = useFetch(url) カスタマイズ可能なオプション パラメータも多数あります。 // 100ms タイムアウト const { data } = useFetch(url, { timeout: 100 }) // リクエストのインターセプション const { data } = useFetch(url, { 非同期beforeFetch({ url, オプション, キャンセル }) { const myToken = getMyToken() を待つ if (!myToken) キャンセル() オプション.ヘッダー = { ...オプション.ヘッダー、 認証: `Bearer ${myToken}`、 } 戻る { オプション } } }) // レスポンスインターセプション const { data } = useFetch(url, { afterFetch(ctx) { (ctx.data.title === 'HxH')の場合 ctx.data.title = 'Hunter x Hunter' // 応答データを変更します ctxを返す }, }) もっと詳細については、VueUseのドキュメントを参照してください。また、別のvue-demiもあります。 Vue の新しいおもちゃである VueUse の具体的な使い方については、これで終わりです。Vue VueUse に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明
>>: 1つの記事でNavicat for MySQLの基本を理解する
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...
目次Web コンテナとは何ですか? HTTP の性質HTTP リクエスト応答の例クッキーとセッション...
最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...
UPDATE はロックしますか?以下のような場合、SQL文はロックされますか? テーブル1を更新しま...
MongoDB は高性能なデータベースですが、使用していくうちにパフォーマンスの問題が発生することが...
目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...
コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...
序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...
クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
この記事では、カルーセルチャートの小さなケースを実装するためのJSの具体的なコードを参考までに共有し...
RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...