Web フロントエンド インタビュー用の高頻度テスト サイト - Vue の高度な機能 (動的コンポーネント、非同期読み込み、キープアライブ、mixin、Vuex、Vue-Router)

シリーズ記事ディレクトリ

コンテンツ	参考リンク
Vueの基本的な使い方	Vue の基本的な使い方 (Vue の最も基本的な知識ポイントをマスターするための 1 つの記事)
Vue通信と高度な機能	Vue コンポーネントと高度な機能間の通信 (さまざまなコンポーネント、カスタム v-model、nextTick、スロット間の通信)
Vue の高度な機能	Vue の高度な機能 (動的コンポーネント、非同期ロード、キープアライブ、ミックスイン、Vuex、Vue-Router)
ビューの原則 1	Vue の原理 (MVVM モデルの理解、データ変更の詳細/監視、配列変更の監視、仮想 DOM の詳細な理解)
ビューの原則 2	Vue の原則 (diff アルゴリズム、テンプレートのコンパイル、コンポーネントのレンダリングと更新、JS 実装のルーティング)
Vue インタビューの質問	Web フロントエンド面接高頻度テストサイト - Vue 面接の質問

---

---

1. Vue の高度な機能

1.動的コンポーネント

• コンポーネントを未知の順序でレンダリングする

画像ソース: https://coding.imooc.com/lesson/419.html#mid=33846

例: 動的コンポーネントの使用

index.vue 親コンポーネント

• コンポーネント名をデータで受け取る
• コンポーネントをバインドする<component>ことにより:is="xxx"

<template>
  <div>
    <p>vue 高级特性-动态组件</p>
    <hr />

    <component :is="NextTick"></component>
  </div>
</template>

<script>
import NextTick from "./NextTick.vue";
export default {
    
    
  components: {
    
     NextTick },
  data() {
    
    
    return {
    
    
      NextTick
    };
  },
};
</script>

例: 複数のコンポーネントを動的にレンダリングする

index.vue 親コンポーネント

<template>
  <div>
    <p>vue 高级特性-动态组件</p>
    <hr />

    <div v-for="(val, key) in newsData" :key="key">
      <component :is="val.type"></component>
    </div>
  </div>
</template>

<script>
import myText from './myText'
import myImage from './myImage'
export default {
    
    
  components: {
    
    
    myText,
    myImage
  },
  data() {
    
    
    return {
    
    
      newsData: {
    
    
        1: {
    
    
          type: 'myText'
        },
        2: {
    
    
          type: 'myImage'
        }
      }
    };
  },
};
</script>

myText サブコンポーネント

<template>
  <div>
    <p>我是 myText 组件</p>
    ---------------------
  </div>
</template>

myImage 子コンポーネント

<template>
  <div>
    <p>我是 myImage 组件</p>
    <img src="xxx">
  </div>
</template>

2. Vue はコンポーネントを非同期的にロードします

• import() 関数
• オンデマンドで読み込み、大きなコンポーネントを非同期で読み込みます

例: コンポーネントを非同期にロードする (オンデマンドでロード、使用時のみ)

index.vue 親コンポーネント

• コンポーネントは必要に応じてコンポーネントをインポートします

<template>
  <div>
    <my-image v-if="showImage" />
    <button @click="showImage = true">点我显示</button>
  </div>
</template>

<script>
export default {
    
    
  components: {
    
    
    myImage: () => import("./myImage"),
  },
  data() {
    
    
    return {
    
    
      showImage: false,
    };
  },
};
</script>

myImage.vue 子组件

<template>
  <div>
    <p>我是 myImage 组件</p>
    <img src="xxx">
  </div>
</template>

3. Vue キャッシュ コンポーネント (キープアライブ)

• キャッシュ コンポーネント
• 頻繁な切り替え、再レンダリングの必要なし
• Vue パフォーマンス最適化の方法

例: キープアライブ インスタンス。他のコンポーネントを切り替えても、現在のコンポーネントは破棄されません。

KeepAlive.vue 親コンポーネント

• A、B、C の 3 つのサブコンポーネントをインポートする
• ボタンをクリックすると、対応するコンポーネントの内容が表示されます

<template>
  <div>
    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <keep-alive-state-a v-if="state === 'A'"></keep-alive-state-a>
      <keep-alive-state-b v-if="state === 'B'"></keep-alive-state-b>
      <keep-alive-state-c v-if="state === 'C'"></keep-alive-state-c>
    </keep-alive>
  </div>
</template>

<script>
import KeepAliveStateA from "./KeepAliveStateA.vue";
import KeepAliveStateB from "./KeepAliveStateB.vue";
import KeepAliveStateC from "./KeepAliveStateC.vue";
export default {
    
    
  components: {
    
    
    KeepAliveStateA,
    KeepAliveStateB,
    KeepAliveStateC,
  },
  data() {
    
    
    return {
    
    
      state: "A",
    };
  },
  methods: {
    
    
    changeState(state) {
    
    
      this.state = state;
    },
  },
};
</script>

KeepAliveStateA.vue 子コンポーネント

<template>
  <div>
    <p>state A</p>
  </div>
</template>

<script>
export default {
    
    
  mounted() {
    
    
    console.log("A mounted");
  },
  destroyed() {
    
    
    console.log("A destroyed");
  },
};
</script>

KeepAliveStateB.vue 子コンポーネント

<template>
  <div>
    <p>state B</p>
  </div>
</template>

<script>
export default {
    
    
  mounted() {
    
    
    console.log("B mounted");
  },
  destroyed() {
    
    
    console.log("B destroyed");
  },
};
</script>

KeepAliveStateC.vue 子コンポーネント

<template>
  <div>
    <p>state C</p>
  </div>
</template>

<script>
export default {
    
    
  mounted() {
    
    
    console.log("C mounted");
  },
  destroyed() {
    
    
    console.log("C destroyed");
  },
};
</script>

4.ミックスイン

• 複数のコンポーネントが同じロジックを持ち、抽出されます
• mixin は完全な解決策ではありません。いくつかの問題があります。
• Vue3 が提案する合成 API は、これらの問題を解決することを目的としています。

ミックスインに関するいくつかの問題

(1) 変数のソースが不明確で、読みにくい
(2) 複数の mixin が名前の競合を引き起こす可能性がある
(3) mixin とコンポーネントの間に多対多の関係がある可能性があり、複雑さが高い

例: ミックスインの使用

MixinDemo.vue 组件

• 最初にmixin.jsファイル
• mixins: [xxx]これを使って

<template>
  <div>
    <p>{
    
    {
    
     name }} {
    
    {
    
     major }} {
    
    {
    
     city }}</p>
    <button @click="showName">显示姓名</button>
  </div>
</template>

<script>
import myMixin from "./mixin";
export default {
    
    
  mixins: [myMixin],
  data() {
    
    
    return {
    
    
      name: "杂货铺",
      major: "web 前端",
    };
  },
  mounted() {
    
    
    console.log("component mounted", this.name);
  },
};
</script>

mixin.js ファイル

• mixin.js の値とメソッドは、それを参照するコンポーネントで直接使用できます

export default {
    
    
  data() {
    
    
    return {
    
    
      city: "北京",
    };
  },
  methods: {
    
    
    showName() {
    
    
      console.log("点击显示名字：", this.name);
    },
  },
  mounted() {
    
    
    console.log("mixin mounted", this.name);
  },
};

2.ヴエックス

1. Vuex の基本概念

Vuex 基本概念の参照リンク

• 州
• ゲッター
• アクション
• 突然変異

2. Vue コンポーネントの場合

Vue コンポーネントの Vuex 参照リンク

• 急送
• 専念
• mapState
• mapGetters
• マップアクション
• マップミューテーション
  

三、Vue-router

Vue-router は参照リンクを使用します

• ルーティング モード (ハッシュ、H5 履歴)
• ルーティング構成 (動的ルーティング、遅延読み込み)
• http://abc.com/#/user/10 などのハッシュ モード (デフォルト) (通常はハッシュ モードが選択されます)
• http://abc.com/user/10 などの H5 履歴モード (デフォルト) (サーバー側のサポートが必要)

1.動的ルーティング

const User = {
    
    
    // 获取参数，如 10 20
    template: '<div>User {
    
    { $router.params.id }} </div>'
}
const router = new VueRouter({
    
    
    routes: [
        // 动态路径参数 以冒号开头。能命中 `/user/10` `/user/20` 等格式的路由
        {
    
    path: '/user/:id', component: User}
    ]
})

2.遅延読み込み

• オンデマンドで導入、遅延読み込みを実現

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: () => import('./components/xxx')
    }
  ]
})

不积跬步无以至千里 不积小流无以成江海

クリックしてフォローし、迷子にならないように、更新を続けてください...