今回は、Vue.js コードを最適化する方法の概要と、Vue.js コードを最適化するための 注意事項 についてお届けします。以下は実際的なケースです。見てみましょう。
ほとんどの人は、Vue.js の基本的な API をいくつかマスターした後、すでにフロントエンド Web サイトを通常どおり開発できます。しかし、Vue を使用してより効率的に開発し、Vue.js のマスターになりたい場合は、これから説明する 5 つのコツを真剣に勉強する必要があります。
最初のステップ: 簡略化されたウォッチャー
シーン復元:
created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } }
コンポーネントが作成されると、リストを一度取得し、同時に入力ボックスを監視し、フィルターされたリストを毎回再取得しますリストのこのシナリオは非常に一般的です。最適化する方法はありますか?
ムーブ分析:
まず第一に、ウォッチャーでは、関数のリテラル名を直接使用できます; 次に、immediate:true を宣言することは、コンポーネントの作成時にすぐに実行されることを意味します。
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>
require.context() メソッドを使用して独自の (モジュール) コンテキストを作成する必要があります。このメソッドは、検索するフォルダー ディレクトリ、そのサブディレクトリも検索するかどうか、およびファイルに一致する 正規表現 の 3 つのパラメーターを受け取ります。
global.js というファイルをコンポーネントフォルダーに追加し、webpack を使用して、必要なすべての基本コンポーネントをこのファイルに動的にパッケージ化します。import Vue from 'vue' function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1) } const requireComponent = require.context( '.', false, /\.vue$/ //找到components文件夹下以.vue命名的文件 ) requireComponent.keys().forEach(fileName => { const componentConfig = requireComponent(fileName) const componentName = capitalizeFirstLetter( fileName.replace(/^\.\//, '').replace(/\.\w+$/, '') //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾,只保留真正的文件名 ) Vue.component(componentName, componentConfig.default || componentConfig) })
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) { // ... } }
<router-view :key="$route.fullpath"></router-view>
4 番目のトリック: 全能のレンダリング関数
シーン復元:vue では、各コンポーネントがルート要素を 1 つだけ持つ必要があります。複数のルート要素がある場合、vue はエラーを報告しました<template> <li v-for="route in routes" :key="route.name" > <router-link :to="route"> {{ route.title }} </router-link> </li> </template>
複数の要素で v-if を使用している場合は、代わりに v-else-if を使用してください。
移動分析:
はありますか?それを解決する方法ですが、現時点では、テンプレートの代わりに render() 関数を使用して HTML を作成する必要があります。実際、js を使用して html を生成する利点は、非常に柔軟で強力であり、v-for や v-if などの機能が限定された vue の命令 API の使用方法を学ぶ必要がないことです。 (reactjs はテンプレートを完全に破棄します)
functional: true, render(h, { props }) { return props.routes.map(route => <li key={route.name}> <router-link to={route}> {route.title} </router-link> </li> ) }
5 番目のトリック: トリックなしで勝てるハイエンドコンポーネント 划重点:这一招威力无穷,请务必掌握 当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子: 有下面几个优化点: 1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下: $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。 2.注意到子组件的 $listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 3.需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置 inheritAttrs:false ,这些默认行为将会被去掉, 以上两点的优化才能成功。 相信看了本文案例你已经掌握了方法,更多精彩请关注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"
@input="$emit('input', $event.target.value)"
>
@focus=$emit('focus', $event)"
其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:<input
:value="value"
v-bind="$attrs"
v-on="listeners"
>
computed: {
listeners() {
return {
...this.$listeners,
input: event =>
this.$emit('input', event.target.value)
}
}
}
以上がVue.jsコードを最適化する方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。