[整理と共有] Vue 開発の実践的な 8 つのヒント

この記事では、ルーティング パラメーターの分離、機能コンポーネント、スタイル スコープ、監視の高度な使用法、複数の変数の監視などを含む、8 つの優れた Vue 開発スキルをまとめて共有します。この記事が皆さんのお役に立てば幸いです。

1. ルーティング パラメーターの分離

通常、ルーティング パラメーターはコンポーネントで使用されますが、ほとんどの人はそうします。以下のこと。

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
        })
    }]
})

2. 機能コンポーネント

機能コンポーネントはステートレスであり、インスタンス化できず、ライフサイクルやメソッドを持ちません。機能コンポーネントの作成も、テンプレートに機能宣言を追加するだけで簡単に行えます。一般に、外部データの変更のみに依存するコンポーネントに適しており、軽量であるためレンダリング パフォーマンスが向上します。コンポーネントに必要なものはすべて、コンテキスト パラメーターを通じて渡されます。これはコンテキスト オブジェクトです。特定のプロパティについてはドキュメントを参照してください。ここでの 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:
        }
    }
}

3. スタイルの範囲

サードパーティのスタイルを変更するのが一般的です。ただし、スコープ付き属性のスタイル分離により、スコープ付き属性を削除するか、新しいスタイルを作成する必要がある場合があります。これらの実践には副作用 (コンポーネント スタイルの汚染、優雅さの欠如) があり、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>

4. watch の高度な使用法

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)
        }
    }
}

5.watch は複数の変数を監視します

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
        }
    }
}

6. イベント パラメータ $event

$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
        }
    }
}

7. プログラムされたイベント リスナー

たとえば、ページがマウントされ、ページがマウントされたときにクリアする必要があるときにタイマーを定義します。破壊されたタイマー。これは問題ないようです。しかし、よく見てみると、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>

（学习视频分享：vuejs入门教程、编程基础视频）

以上が[整理と共有] Vue 開発の実践的な 8 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。