ホームページ ウェブフロントエンド jsチュートリアル vue プロジェクトでの watch の即時使用

vue プロジェクトでの watch の即時使用

Jun 09, 2018 am 11:38 AM
vue 技術共有

今回は、Vue プロジェクトで watch をすぐに使用する場合についてお届けします。以下は、Vue プロジェクトで watch をすぐに使用する場合の注意点です。

これもプロジェクトに書きました。たとえば、初期化される前に一度実行してその変更を監視する必要があるリクエストがある場合、多くの人は次のように書きます:

created(){
  this.fetchPostList()
},
watch: {
  searchInputValue(){
    this.fetchPostList()
  }
}
ログイン後にコピー

上記を完全に次のように書くことができます:

watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}
ログイン後にコピー

2.コンポーネントの登録、価値があります ご参考までに

一般に、私たちのコンポーネントは次のように書かれています:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}
<BaseInput v-model="searchText" @keydown.enter="search" />
<BaseButton @click="search"> <BaseIcon name="search"/></BaseButton>
ログイン後にコピー

通常 3 つのステップがあります、

最初のステップは導入、

二番目のステップは登録、

三番目のステップが正式な使い方です

これは最も一般的で一般的な書き方でもあります。しかし、このような書き方は古典的で、何度も導入したり、登録したりする必要があるコンポーネントが多く、非常に面倒に感じます。

webpack を使用して、 require.context() メソッドを使用して独自の (モジュール) コンテキストを作成し、自動動的な require コンポーネントを実現できます。

アイデアは、src フォルダーの下の main.js で、webpack を使用して必要なすべての基本コンポーネントを動的にパッケージ化することです。

コードは次のとおりです:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = require.context(
 ‘./components', false, /base-[\w-]+\.vue$/
)
requireComponent.keys().forEach(fileName => {
 // Get component config
 const componentConfig = requireComponent(fileName)
 // Get PascalCase name of component
 const componentName = upperFirst(
  camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
 )
 // Register component globally
 Vue.component(componentName, componentConfig.default || componentConfig)
})
ログイン後にコピー

このようにして、コンポーネントを導入するのに必要なのは 3 番目のステップだけです:

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>
ログイン後にコピー

3 つ目は、vuex モジュールの導入を効率化します

vuex の場合、ストアを次のように出力します。以下:

import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
export default new Vuex.Store({
 modules: {
  auth,
  posts,
  comments,
  // ...
 }
})
ログイン後にコピー

たくさんのモジュールを導入し、それらを Vuex.Store に登録します~~

合理化されたアプローチは、ファイルを読み取るために require.context() を使用します。

import camelCase from 'lodash/camelCase'
const requireModule = require.context('.', false, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
 // Don't register this file as a Vuex module
 if (fileName === './index.js') return
 const moduleName = camelCase(
  fileName.replace(/(\.\/|\.js)/g, '')
 )
 modules[moduleName] = {
        namespaced: true,
        ...requireModule(fileName),
       }
})
export default modules
ログイン後にコピー

このように、必要なコードは次のとおりです:

import modules from './modules'
export default new Vuex.Store({
 modules
})
ログイン後にコピー

4. ルートの遅延読み込み

vue の導入については、以前の技術的なポイントとまとめでも触れました。 vue プロジェクトの再構築は、require または import() コンポーネントを通じて動的に実行できます。

{
 path: '/admin',
 name: 'admin-dashboard',
 component:require('@views/admin').default
}
ログイン後にコピー

または

{
 path: '/admin',
 name: 'admin-dashboard',
 component:() => import('@views/admin')
}
ログイン後にコピー

ロードルート。

5. ルーターのキーコンポーネントを更新します

次のシーンは、多くのプログラマーの心を本当に打ち砕きます... まず第一に、デフォルトでは、誰もがルーティング制御を実装するために Vue-router を使用します。 ブログ Web サイトを作成していて、要件が /post-haorooms/a から /post-haorooms/b にジャンプすることであるとします。するとなんとページが飛んだあとデータが更新されていないことが判明? !その理由は、vue-router がこれが同じコンポーネントであることを「賢く」発見し、このコンポーネントを再利用することを決定したため、作成された関数に記述したメソッドがまったく実行されなかったためです。通常の解決策は、次のように $route の変更を監視してデータを初期化することです:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
}, 
watch: {
 '$route': {
  handler: 'resetData',
  immediate: true
 }
},
methods: {
 resetData() {
  this.loading = false
  this.error = null
  this.post = null
  this.getPost(this.$route.params.id)
 },
 getPost(id){
 }
}
ログイン後にコピー

バグは解決されましたが、毎回このように書くのはあまりにも洗練されていませんか?可能であれば怠け者であるという原則に従い、コードが次のように記述されることを願っています:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
  // ...
 }
}
ログイン後にコピー

解決策: たとえパブリック コンポーネントであっても、 URL が変更されると、コンポーネントが再作成されます。

<router-view :key="$route.fullpath"></router-view>
ログイン後にコピー

注: 私の個人的な経験から、これは通常、この属性が app.vue のルート ディレクトリに追加されると、クリックするたびに大量の再描画が行われることを避けるために、サブルートで使用されます。アドレスを変更すると再描画されますが、それでも損失よりも利益の方が大きくなります。

6. 唯一のコンポーネントのルート要素

シナリオは次のとおりです:

(Error のインスタンスの代わりに値が出力されました)
テンプレートのコンパイル中にエラーが発生しました:


- コンポーネント テンプレートにはルート要素が 1 つだけ含まれている必要があります
複数の要素で v-if を使用している場合は、代わりに v-else-if
を使用してそれらをチェーンします。

pテンプレートには 1 つしかありません。上記のように 2 つの並列 p を指定することはできません。

たとえば、次のコード:

<template>
 <li
  v-for="route in routes"
  :key="route.name"
 >
  <router-link :to="route">
   {{ route.title }}
  </router-link>
 </li>
</template>
ログイン後にコピー

はエラーを報告します。

レンダリング関数を使用して、コンポーネントのパッケージ化とイベント属性の浸透の問題をレンダリングできます

当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:

//父组件
<BaseInput 
  :value="value"
  label="密码" 
  placeholder="请填写密码"
  @input="handleInput"
  @focus="handleFocus>
</BaseInput>
//子组件
<template>
 <label>
  {{ label }}
  <input
   :value="value"
   :placeholder="placeholder"
   @focus=$emit(&#39;focus&#39;, $event)"
   @input="$emit(&#39;input&#39;, $event.target.value)"
  >
 </label>
</template>
ログイン後にコピー

这样写很不精简,很多属性和事件都是手动定义的,我们可以如下写:

<input
  :value="value"
  v-bind="$attrs"
  v-on="listeners"
>
computed: {
 listeners() {
  return {
   ...this.$listeners,
   input: event => 
    this.$emit('input', event.target.value)
  }
 }
}
ログイン後にコピー

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件。

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

脚手架与热刷新、热加载

Vue怎样进行局部作用域 & 模块化

以上がvue プロジェクトでの watch の即時使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VUEのボタンに関数を追加する方法 VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

vue.jsでJSファイルを参照する方法 vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted()ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでWatchの使用方法 VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vue Multi-Page開発とはどういう意味ですか? Vue Multi-Page開発とはどういう意味ですか? Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス:アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性:各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング:ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化:各ページには独自のURLがあり、SEOに役立ちます。

Vueによる前のページに戻る方法 Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go(-1)$ router.back()outes&lt; router-link to =&quot;/&quot; Component Window.history.back()、およびメソッド選択はシーンに依存します。

Vueのバージョンを照会する方法 Vueのバージョンを照会する方法 Apr 07, 2025 pm 11:24 PM

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。 &lt; script&gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

Function Intercept Vueの使用方法 Function Intercept Vueの使用方法 Apr 08, 2025 am 06:51 AM

VUEの関数傍受は、指定された期間内に関数が呼び出され、パフォーマンスの問題を防ぐ回数を制限するために使用される手法です。実装方法は次のとおりです。LodashLibrary:Import {Debounce}から「Lodash」からインポート。 debounce関数を使用して、インターセプト関数を作成します。インターセプト関数を呼び出すと、制御関数は500ミリ秒でせいぜい1回呼び出されます。

See all articles