ホームページ ウェブフロントエンド 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でechartを使用する方法 vueでechartを使用する方法 May 09, 2024 pm 04:24 PM

vueでechartを使用する方法

vue におけるエクスポートのデフォルトの役割 vue におけるエクスポートのデフォルトの役割 May 09, 2024 pm 06:48 PM

vue におけるエクスポートのデフォルトの役割

vueでのmap関数の使い方 vueでのmap関数の使い方 May 09, 2024 pm 06:54 PM

vueでのmap関数の使い方

vueのeventと$eventの違い vueのeventと$eventの違い May 08, 2024 pm 04:42 PM

vueのeventと$eventの違い

Vue における onmounted の役割 Vue における onmounted の役割 May 09, 2024 pm 02:51 PM

Vue における onmounted の役割

vueのエクスポートとデフォルトのエクスポートの違い vueのエクスポートとデフォルトのエクスポートの違い May 08, 2024 pm 05:27 PM

vueのエクスポートとデフォルトのエクスポートの違い

Vueのフックとは何ですか Vueのフックとは何ですか May 09, 2024 pm 06:33 PM

Vueのフックとは何ですか

vue の onmounted は、react のどのライフサイクルに対応しますか vue の onmounted は、react のどのライフサイクルに対応しますか May 09, 2024 pm 01:42 PM

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

See all articles