vue プロジェクトでの watch の即時使用
今回は、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过来的一系列事件。举例子: 这样写很不精简,很多属性和事件都是手动定义的,我们可以如下写: $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读://父组件
<BaseInput
:value="value"
label="密码"
placeholder="请填写密码"
@input="handleInput"
@focus="handleFocus>
</BaseInput>
//子组件
<template>
<label>
{{ label }}
<input
:value="value"
:placeholder="placeholder"
@focus=$emit('focus', $event)"
@input="$emit('input', $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)
}
}
}
v-bind="$attrs"
传入内部组件。 v-on="$listeners"
传入内部组件。
以上がvue プロジェクトでの watch の即時使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











vue の onmounted は、react のどのライフサイクルに対応しますか
