2023 年のフロントエンド Vue の面接での非常に詳細な 12 の質問 (回答分析を含む)。欲しいものはすべてここにあります! ！！

2023 年の Vue インタビューへようこそ。以下は Vue に関するインタビューの質問 40 件で、各質問には詳細な回答とコードの説明が付いています。

Vue.js とは何なのか説明してください。その中心的な機能は何ですか?
Vue.js は、ユーザーインターフェイスを構築するための人気のある JavaScript フロントエンドフレームワークです。その中心的な機能は、コアライブラリとプラグインエコシステムをカプセル化することによって、宣言的レンダリング、コンポーネントベースの開発、および応答性の高いデータバインディングを実現することです。
Vue の双方向データバインディングの原則について説明してください。
Vue の双方向データバインディングは、Vue の応答システムを通じて実装されます。データが変更されると、Vue は自動的に変更を認識し、変更されたデータをビューに同期します。同時に、ユーザーがビューを操作すると、Vue はユーザーの入力をデータに動的に反映することもできます。

コードの説明

入力したテキストは次のとおりです: { { メッセージ }}

上の例では、v-model ディレクティブを使用して双方向のデータバインディングを実装しました。要素の値はメッセージデータ属性に自動的に双方向にバインドされ、メッセージデータに対する変更は入力ボックスに同期され、その逆も同様です。

Vue コンポーネントとは何ですか? Vue コンポーネントを定義するにはどうすればよいですか?
Vue では、コンポーネントは再利用可能な Vue インスタンスです。独自のテンプレート、データ、メソッド、スタイルなどをカプセル化し、アプリケーション内で複数回使用できます。

Vue コンポーネントは、Vue.component メソッドを通じて定義できます。

コードの説明

<template id="hello-template">
  <div>
    <h2>Hello {
    
    {
    
     name }}!</h2>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
Vue.component('hello', {
    
    
  template: '#hello-template',
  data() {
    
    
    return {
    
    
      name: 'Vue'
    }
  },
  methods: {
    
    
    greet() {
    
    
      alert('Hello!')
    }
  }
})
</script>

上の例では、Hello という名前の Vue コンポーネントを定義しました。コンポーネントのテンプレートは、外部要素を通じてそのコンテンツをコンポーネントのテンプレートとして使用して定義されます。このコンポーネントは、テンプレートで使用できる name データ属性と挨拶メソッドも定義します。

Vue で条件付きレンダリングを実行するにはどうすればよいですか?
Vue では、v-if 命令と v-show 命令を使用して条件付きレンダリングを実装できます。

v-if は true または false の式に基づいて要素を動的に追加または削除しますが、v-show は要素の表示と非表示を制御するだけです。

コードの説明

<div id="app">
  <button @click="toggle">Toggle</button>
  <p v-if="visible">这是一个可见的段落。</p>
  <p v-show="visible">这是另一个可见的段落。</p>
</div>

<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    visible: true
  },
  methods: {
    
    
    toggle() {
    
    
      this.visible = !this.visible
    }
  }
})
</script>

上の例では、v-if ディレクティブと v-show ディレクティブを使用して、可視データ属性の true または false 値に基づいて 2 つの段落要素の可視性を制御します。ボタンをクリックすると、visible の値が反転し、条件付きレンダリングがトリガーされます。

Vue でユーザー入力とイベントを処理するにはどうすればよいですか?
Vue では、v-on ディレクティブ (@ と省略) を使用して DOM イベントとカスタムイベントをリッスンできます。

コードの説明

<div id="app">
  <button @click="handleClick">点击我</button>
  <input @input="handleInput" placeholder="输入一些文字">
  <p>{
    
    {
    
     message }}</p>
</div>

<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: ''
  },
  methods: {
    
    
    handleClick() {
    
    
      alert('按钮被点击!')
    },
    handleInput(event) {
    
    
      this.message = event.target.value
    }
  }
})
</script>

上記の例では、@click ディレクティブを使用してボタンのクリックイベントをリッスンし、handleClick メソッドでプロンプトボックスをポップアップします。さらに、@input ディレクティブを使用して入力ボックスの入力イベントをリッスンし、handleInput メソッドのメッセージデータを更新します。

Vue で非同期リクエストを処理するにはどうすればよいですか?
Vue では、vue-resource や axios などのサードパーティライブラリを使用して、非同期リクエストを処理できます。これらのライブラリは XHR リクエストをカプセル化し、GET、POST、その他のリクエストを送信するためのよりシンプルな API を提供します。

コードの説明

<div id="app">
  <button @click="fetchData">获取数据</button>
  <ul>
    <li v-for="item in items" :key="item.id">{
    
    {
    
     item.name }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    items: []
  },
  methods: {
    
    
    fetchData() {
    
    
      // 使用vue-resource发送GET请求
      this.$http.get('/api/data')
        .then(response => {
    
    
          this.items = response.data
        })
        .catch(error => {
    
    
          console.error(error)
        })
    }
  }
})
</script>

上記の例では、vue-resource ライブラリを使用して GET リクエストを送信し、リクエストが成功した後に返されたデータを items 配列に割り当てます。このようにして、テンプレートで v-for ディレクティブを使用してデータリストをレンダリングできます。

Vue のライフサイクルフック機能について説明してください。
Vue インスタンスのライフサイクルには、作成、更新、破棄などの特定の段階がいくつかあります。 Vue は、これらの特定の段階でカスタムコードを追加できるようにするいくつかのライフサイクルフック関数を提供します。

一般的に使用されるライフサイクルフック関数には、beforeCreate、created、mounted、updated、destroy などがあります。

コードの説明

<div id="app">
  <p>{
    
    {
    
     message }}</p>
</div>

<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello, Vue!'
  },
  beforeCreate() {
    
    
    console.log('beforeCreate')
  },
  created() {
    
    
    console.log('created')
  },
  mounted() {
    
    
    console.log('mounted')
  },
  updated() {
    
    
    console.log('updated')
  },
  destroyed() {
    
    
    console.log('destroyed')
  }
})
</script>

上の例では、各ライフサイクルフック関数が呼び出される順序をコンソールに出力します。ブラウザの開発者ツールで出力を表示できます。

Vue の computed と watch の違いは何ですか?
computed と watch は両方ともデータの変更を監視するために使用されますが、いくつかの違いがあります。

computed は依存関係に基づいてキャッシュされ、アクセスされるたびに再計算されるのではなく、依存データが変更された場合にのみ再計算されます。

Watch は特定のデータを監視し、データが変化したときにコールバック関数を実行します。これは、非同期操作または高価な操作を必要とするデータ変更の処理に適しています。

コードの説明

<div id="app">
  <input v-model="message" placeholder="输入一些文字">
  <p>你输入的文字是：{
    
    {
    
     message }}</p>
  <p>计算属性：{
    
    {
    
     reversedMessage }}</p>
</div>

<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: ''
  },
  computed: {
    
    
    reversedMessage() {
    
    
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    
    
    message(newValue, oldValue) {
    
    
      console.log(`message 发生变化：${
      
      oldValue} → ${
      
      newValue}`)
    }
  }
})
</script>

上の例では、メッセージの内容を反転するために使用される計算プロパティ reversedMessage を定義しました。ユーザーがテキストを入力すると、メッセージが変更され、reversedMessage が再計算されて表示されます。同時に、watch を使用してメッセージの変更を観察し、変更された値を出力します。

Vue のルーティングとは何ですか?ルーティングを設定するにはどうすればよいですか?
Vue では、ルーティングを使用して単一ページアプリケーションを構築します。これにより、さまざまな URL パスに従ってさまざまなコンポーネントをロードし、ページ内の切り替えやナビゲーションを実現できます。

ルーティングを構成するには、vue-router ライブラリを導入し、ページの要件に基づいて一連のルーティングルールを定義する必要があります。

コードの説明

<div id="app">
  <router-link to="/home">主页</router-link>
  <router-link to="/about">关于</router-link>
  <router-view></router-view>
</div>

<script>
const Home = {
    
     template: '<div>这是主页</div>' }
const About = {
    
     template: '<div>这是关于页面</div>' }

const routes = [
  {
    
     path: '/home', component: Home },
  {
    
     path: '/about', component: About }
]

const router = new VueRouter({
    
    
  routes
})

new Vue({
    
    
  el: '#app',
  router
})
</script>

上の例では、タグを使用して、ホームページと about ページを指す 2 つのナビゲーションリンクを作成しました。ラベルを使用して、現在アクティブなコンポーネントを表示します。

Vue で状態を管理するにはどうすればよいですか?
Vue では、状態管理に vuex を使用できます。 Vuex は Vue の公式状態管理ライブラリであり、さまざまなアプリケーション状態の一元的なストレージと管理を提供して、異なるコンポーネント間の通信とデータ共有を容易にします。

コードの説明

<div id="app">
  <p>计数器：{
    
    {
    
     count }}</p>
  <button @click="increment">增加</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script>
const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    }
  }
})

new Vue({
    
    
  el: '#app',
  store,
  computed: {
    
    
    count() {
    
    
      return this.$store.state.count
    }
  },
  methods: {
    
    
    increment() {
    
    
      this.$store.commit('increment')
    }
  }
})
</script>

上記の例では、単純なカウンターを作成し、状態管理に vuex を使用しました。 this を通じてステータスを取得します。 $s t ore . s t a t e 来获取状态，通过 ‘ t hi s .$ store.commit`来提交变更。

Vue の動的コンポーネントとは何なのか説明してください。
動的コンポーネントは、Vue の特殊なタイプのコンポーネントです。これにより、さまざまなデータや状態に基づいて、さまざまなコンポーネント間を動的に切り替えることができます。

動的コンポーネントを使用する場合、要素と属性を通じてレンダリングするコンポーネントを指定します。

コードの説明

<div id="app">
  <button @click="toggle">切换组件</button>
  <component :is="currentComponent"></component>
</div>

<script>
const ComponentA = {
    
     template: '<div>组件A</div>' }
const ComponentB = {
    
     template: '<div>组件B</div>' }

new Vue({
    
    
  el: '#app',
  data: {
    
    
    currentComponent: 'ComponentA'
  },
  methods: {
    
    
    toggle() {
    
    
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  },
  components: {
    
    
    ComponentA,
    ComponentB
  }
})
</script>

上記の例では、ボタンをクリックすることで、ComponentA コンポーネントと ComponentB コンポーネントの表示を切り替えています。ボタンをクリックすると toggle メソッドがトリガーされ、currentComponent の値が動的に変更されます。

Vue でトランジションエフェクトを実装するにはどうすればよいですか?
Vue では、トランジション要素と CSS トランジションクラスを通じて、アニメーション化されたトランジション効果を実現できます。

コードの説明

<div id="app">
  <button @click="toggle">切换</button>
  <transition name="fade">
    <p v-if="visible">这是一个带有过渡效果的段落。</p>
  </transition>
</div>

<style>
.fade-enter-active, .fade-leave-active {
    
    
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    visible: false
  },
  methods: {
    
    
    toggle() {
    
    
      this.visible = !this.visible
    }
  }
})
</script>

上記の例では、遷移する要素を要素でラップし、遷移効果の名前を指定する name 属性を追加します。 4 つの CSS クラス fade-enter-active、fade-leave-active、fade-enter、fade-leave-to を指定することで、グラデーショントランジション効果を定義します。

2023 年のフロントエンド Vue の面接での非常に詳細な 12 の質問 (回答分析を含む)。欲しいものはすべてここにあります! ！ ！

おすすめ

2023 年のフロントエンド Vue の面接での非常に詳細な 12 の質問 (回答分析を含む)。欲しいものはすべてここにあります! ！！