ホームページ > 記事 > ウェブフロントエンド > [整理と共有] Vue 開発の実践的な 8 つのヒント
この記事では、ルーティング パラメーターの分離、機能コンポーネント、スタイル スコープ、監視の高度な使用法、複数の変数の監視などを含む、8 つの優れた Vue 開発スキルをまとめて共有します。この記事が皆さんのお役に立てば幸いです。
通常、ルーティング パラメーターはコンポーネントで使用されますが、ほとんどの人はそうします。以下のこと。
export default { methods: { getParamsId() { return this.$route.params.id } } }
コンポーネントで $route を使用すると、対応するルートとの結合が強くなり、コンポーネントが特定の URL に制限されるため、コンポーネントの柔軟性が制限されます。正しいアプローチは、プロップを介して切り離すことです。
const router = new VueRouter({ routes: [{ path: /user/:id , component: User, props: true }] })
ルートの props 属性を true に設定すると、コンポーネントはコンポーネント内の props を通じて params パラメータを受け取ることができます。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
export default { props: [ id ], methods: { getParamsId() { return this.id } } }
関数モードを通じて props を返すこともできます。
const router = new VueRouter({ routes: [{ path: /user/:id , component: User, props: (route) => ({ id: route.query.id }) }] })
機能コンポーネントはステートレスであり、インスタンス化できず、ライフサイクルやメソッドを持ちません。機能コンポーネントの作成も、テンプレートに機能宣言を追加するだけで簡単に行えます。一般に、外部データの変更のみに依存するコンポーネントに適しており、軽量であるためレンダリング パフォーマンスが向上します。コンポーネントに必要なものはすべて、コンテキスト パラメーターを通じて渡されます。これはコンテキスト オブジェクトです。特定のプロパティについてはドキュメントを参照してください。ここでの props は、バインドされたすべてのプロパティを含むオブジェクトです。
<template functional> <div class="list"> <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)"> <p>{{item.title}}</p> <p>{{item.content}}</p> </div> </div> </template>
親コンポーネントの使用法
<template> <div> <List :list="list" :itemClick="item => (currentItem = item)" /> </div> </template>
import List from @/components/List.vue export default { components: { List }, data() { return { list: [{ title: title , content: content }], currentItem: } } }
サードパーティのスタイルを変更するのが一般的です。ただし、スコープ付き属性のスタイル分離により、スコープ付き属性を削除するか、新しいスタイルを作成する必要がある場合があります。これらの実践には副作用 (コンポーネント スタイルの汚染、優雅さの欠如) があり、CSS プリプロセッサでスタイルの浸透を使用して実装されます。この問題を解決するには、>>> または /deep/ を使用できます:
<style scoped> Outer layer >>> .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { font-size: 16px; } } </style>
<style scoped> /deep/ .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { font-size: 16px; } } </style>
watch Triggeredリスナーのプロパティが変更されたとき コンポーネントの作成直後に監視を実行したい場合があります。思いつく方法の 1 つは、作成ライフサイクル中に一度呼び出すことですが、これはエレガントな書き方ではないため、次のようなものを使用できるかもしれません。
export default { data() { return { name: Joe } }, watch: { name: { handler: sayName , immediate: true } }, methods: { sayName() { console.log(this.name) } } }
ディープ リスニング
オブジェクトをリッスンするときに、オブジェクト内のプロパティが変化しても、監視はトリガーされません。それに対して詳細な監視を設定します。
export default { data: { studen: { name: Joe , skill: { run: { speed: fast } } } }, watch: { studen: { handler: sayName , deep: true } }, methods: { sayName() { console.log(this.studen) } } }
リスナーをトリガーして複数のメソッドを実行する
配列を使用すると、文字列、関数、オブジェクトなどの複数のフォームを設定できます。
export default { data: { name: Joe }, watch: { name: [ sayName1 , function(newVal, oldVal) { this.sayName2() }, { handler: sayName3 , immaediate: true } ] }, methods: { sayName1() { console.log( sayName1==> , this.name) }, sayName2() { console.log( sayName2==> , this.name) }, sayName3() { console.log( sayName3==> , this.name) } } }
watch 自体は複数の変数を監視できません。ただし、計算されたプロパティを持つオブジェクトを返し、そのオブジェクトをリッスンすることで、「複数の変数をリッスン」することができます。
export default { data() { return { msg1: apple , msg2: banana } }, compouted: { msgObj() { const { msg1, msg2 } = this return { msg1, msg2 } } }, watch: { msgObj: { handler(newVal, oldVal) { if (newVal.msg1 != oldVal.msg1) { console.log( msg1 is change ) } if (newVal.msg2 != oldVal.msg2) { console.log( msg2 is change ) } }, deep: true } } }
$event はイベント オブジェクトの特別な変数であり、より多くのパラメータが利用可能です。複雑な機能を実装します。ネイティブ イベント: ネイティブ イベントのデフォルトのイベント オブジェクトと同じように動作します。
<template> <div> <input type="text" @input="inputHandler( hello , $event)" /> </div> </template>
export default { methods: { inputHandler(msg, e) { console.log(e.target.value) } } }
カスタムイベント: カスタムイベントでは、子コンポーネントからスローされた値をキャプチャすることとして表現されます。
export default { methods: { customEvent() { this.$emit( custom-event , some value ) } } }
<template> <div> <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)"> </my-list> </div> </template>
export default { methods: { customEvent(index, e) { console.log(e) // some value } } }
たとえば、ページがマウントされ、ページがマウントされたときにクリアする必要があるときにタイマーを定義します。破壊されたタイマー。これは問題ないようです。しかし、よく見てみると、this.timer の唯一の目的は、beforeDestroy でタイマー番号を取得できるようにすることであり、それ以外の場合は役に立ちません。
export default { mounted() { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy() { clearInterval(this.timer) } }
可能であれば、ライフサイクル フックにのみアクセスすることをお勧めします。これは深刻な問題ではありませんが、混乱を招く可能性があります。この問題は、 or を使用してページのライフサイクルの破棄をリッスンすることで解決できます:
export default { mounted() { this.creatInterval( hello ) this.creatInterval( world ) }, creatInterval(msg) { let timer = setInterval(() => { console.log(msg) }, 1000) this.$once( hook:beforeDestroy , function() { clearInterval(timer) }) } }
使用这种方法,即使我们同时创建多个定时器,也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期,父组件接收事件进行通知。
子组件
export default { mounted() { this.$emit( listenMounted ) } }
父组件
<template> <div> <List @listenMounted="listenMounted" /> </div> </template>
其实有一种简单的方法就是使用@hook 来监听组件的生命周期,而不需要在组件内部做任何改动。同样,创建、更新等也可以使用这个方法。
<template> <List @hook:mounted="listenMounted" /> </template>
以上が[整理と共有] Vue 開発の実践的な 8 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。