vueの一般的な面接の質問の要約（よく聞かれる質問）

参考までに、これは非常に包括的です：https：//blog.csdn.net/qq_37774171/article/details/87093678
https://blog.csdn.net/liang377122210/article/details/71545459
https://segmentfault.com/ a / 1190000015560315jQuery

とVueの違い

1. Vue.jsとは何ですか？

Vue.jsは、ユーザーインターフェイスを構築するためのプログレッシブフロントエンドフレームワークのセットです（すべてではなく、使用されている方を使用します）。Vueのコアライブラリは、ビューレイヤーのみに焦点を当てています。一方、Vueは完全に駆動できます。Vueエコシステムでサポートされているファイルコンポーネントとライブラリによって開発された単一の複雑な単一ページアプリケーションの採用。
Vue.jsの目標は、可能な限り単純なAPIを介して、応答データバインディングと結合されたビューコンポーネントを実装することです。

2. Vue.jsの利点は何ですか？

1. レスポンシブデータバインディング
   ここでのレスポンシブ性は、@ mediaメディアクエリのレスポンシブレイアウトではありませんが、vue.jsはページ内の一部のデータ変更に自動的に応答します。
2. コンポーネントベースの開発
   は、保守、再利用、およびテスト可能です。つまり、ページは複数のコンポーネントで構成されています。
   Vue.jsはコンポーネントを使用して、単一ページアプリケーションのさまざまなモジュールを単一のコンポーネント（コンポーネント）に分割します。最初に親アプリケーションにさまざまなコンポーネントタグ（穴を占有）を記述し、に渡されるパラメーターを書き込むだけです。コンポーネントラベルのコンポーネント（関数にパラメーターを渡すのと同じように、このパラメーター

3.jQueryとVueの違い

1. jQueryは最初にdomオブジェクトを取得してから、domオブジェクトの値を変更する必要があります。
2. Vueは最初に値をjsオブジェクトにバインドし、次にjsオブジェクトの値を変更します。Vueフレームワークは自動的にdomの値を更新します。
3. Vueはdom操作の実行に役立つことは簡単に理解できます。将来的には、オブジェクトの値を変更し、要素とオブジェクトをVueに
   バインドする必要があります。Vueフレームワークは自動的にdom関連の操作を実行するのに役立ちます。
4. この種のdom要素はJSオブジェクトの値によって変化することを一方向データバインディングと呼びます。JSオブジェクトの値もdom要素の値によって変化する場合、それは双方向データバインディングと呼ばれます。

4. MVVMモデルとは何ですか？（双方向データバインディング）

MVVMは、model、view、viewmodelの略で、データ駆動型モデルです。つまり、すべてがデータを操作することによって行われ、domツリーの操作を回避しようとします。

モデルはデータモデルを表し、データの変更と操作のためのビジネスロジックもモデルで定義できます。
ビューは、データモデルを表示用のUIに変換するUIコンポーネントを表します。
ViewModelは、ViewとModelを同期し、ModelとViewを接続するオブジェクトです。
MVVMアーキテクチャでは、ViewとModelの間に直接接続はありませんが、ViewModelを介して相互作用します。ModelとViewModelの間の相互作用は双方向であるため、Viewデータの変更はModelに同期され、モデルデータビューにもすぐに反映されます。

ViewModelは、双方向のデータバインディングを介してViewレイヤーとModelレイヤーを接続し、ViewとModelの間の同期は、人間の介入なしに完全に自動化されます。したがって、開発者はビジネスロジックに注意を払うだけで、DOMを手動で操作する必要はありません。データ状態の同期に注意を払う必要があります。複雑なデータ状態のメンテナンスはMVVMによって完全に管理されます。

5. mvvmモードと他のフレームワーク（jquery）の違い​​は何ですか？どのシナリオが適していますか？

違い：Vueはデータ駆動型であり、ノード操作の代わりにデータを使用してビューレイヤーを表示します。
シナリオ：より多くのデータ操作、より便利なシナリオ

6.シングルページアプリケーションとは何ですか？その長所と短所

シングルページアプリケーション（SPA）は、素人の用語では、メインページが1つしかないアプリケーションを指し、ブラウザは最初に必要なすべてのhtml、js、cssをロードする必要があります。すべてのページコンテンツは、このいわゆるメインページに含まれています。ただし、書き込み時には、個別に書き込まれ（ページフラグメント）、対話中にルーティングプログラムによって動的にロードされ、単一ページのページがジャンプして、部分的なリソースのみが更新されます。主にPC側で使用されます。

利点：

1. ユーザーエクスペリエンスは良好で高速であり、コンテンツの変更でページ全体をリロードする必要はありません。これに基づいて、スパがサーバーに与える圧力が少なくなります。
2. フロントエンドとリアエンドが分離されています。
3. ページ効果はよりクールになります（ページコンテンツを切り替えるときの特別なアニメーションなど）。

短所：

1. seoを助長していません。（検索エンジンはhtmlのコンテンツのみを認識し、jsのコンテンツは認識しないため）
2. ナビゲーションは利用できません。ナビゲートする必要がある場合は、自分で前後に移動する必要があります。（単一のページであるため、ブラウザの順方向および逆方向の機能は使用できません。したがって、独自のスタック管理を構築する必要があります）。
3. 初期読み込みには時間がかかります。
4. ページの複雑さが大幅に増加しました。

マルチページアプリケーション（MPA）

マルチページ（MPA）は、アプリケーションに複数のページがあり、ページがジャンプするとページ全体が更新されることを意味します。
最初の画面時間は速い（1つのhttpリクエストの時間のみ）; seo効果は良い;ページ切り替えは遅い（各リクエストはhttpリクエストを送信する必要がある）

7. vueで一般的に使用されるコマンドはいくつありますか？

v-for、v-if、v-show、v-bind、v-on、v-else、v-text

8. vueで一般的に使用される修飾子は何ですか？？

.prevent：イベントを送信し、ページをリロードしなくなりました; .stop：クリックイベントがバブリングするのを防ぎます; .self：子要素ではなく要素自体でイベントが発生したときにトリガーします; .capture：イベントリスナー、イベントが発生しますいつ呼び出されますか

9. vueのv-showとv-ifの違いは？

どちらも、trueとfalseに応じて、要素の実際の表示と非表示を切り替えることができます。

V-showはクラススタイルを切り替える、v-ifはDom要素を切り替える、v-showは頻繁な切り替えに使用される、切り替えの消費量が少ない、逆にv-ifを使用する、動作条件変更されることはめったにありません。

参照：vueプロジェクトにおけるv-ifとv-showの違いの最も完全な分析

10.Vueでv-forv-ifを一緒に使用することの優先順位

当它们处于同一节点，v-for的优先级比v-if更高、これは、v-ifが各v-forループで繰り返し実行されることを意味します。

ただし、v-ifとv-forを同時に使用することはお勧めしません。

同時に使用したい場合は、通常、次の2つの一般的な状況で使用する傾向があります。

1.リスト内のアイテムをフィルタリングするため（たとえば、v-for = "user in users" v-if = "user.isActive"）。この場合、ユーザーを計算された属性（activeUsersなど）に置き換えて、フィルターされたリストを返すようにしてください。

2.ループの実行を条件付きでスキップすることが目標である場合は、v-ifを外側の要素（ul、olなど）に配置できます。

11. vueのライフサイクルについてどのように理解していますか？

vueのライフサイクルは、vueインスタンスを作成、実行、破棄するプロセスです。さまざまな関数がさまざまな段階でトリガーされます。これらの関数は、createなどのライフサイクル関数でもあります。インスタンスの作成後、データを初期化できます。ただし、 domはまだレンダリングされておらず、マウントされたページデータはすべてレンダリングされています。この関数内でdomを操作できます。

12.Vueのライフサイクル

ライフサイクルフック	トリガーされた動作	この段階での運用例
beforeCreate	マウント要素$ elとvueインスタンスのデータデータはどちらも未定義であり、初期化されていません。	ここで読み込みイベントを追加できます
作成した	vueインスタンスのデータが利用可能です、$ elはまだありません、DOMは生成されません	ロードを完了し、サーバーから初期データを取得します
beforeMount	$ elとvueインスタンスのデータは初期化されますが、それはまだ仮想domノードであり、ページはまだレンダリングされていません。最初にピットを占有し、後でマウントするときに値をレンダリングします。
マウント	vueインスタンスがマウントされ、仮想DOMが実際のDOMになります	ここでバックエンドリクエストを開始し、データを取得し、ルーティングフックを使用していくつかのことを行います。DOMノードを操作できます。
beforeUpdate	データ内のデータが変更され、再レンダリングする前に呼び出されます
更新しました	データ内のデータが変更されました。再レンダリング後に呼び出してください	データが更新されたら、いくつかの処理を行います（ここで監視を使用して監視することもできます）
beforeDestroy	コンポーネント破壊の前に呼び出されます	「xxxを削除してもよろしいですか？タイマーまたはイベントバインディングを削除してください」などのプロンプトをユーザーに表示します。
破壊されました	コンポーネントが破棄された後に呼び出されると、vueインスタンスはイベントリスナーとdomとのバインディングを削除します（応答なし）が、DOMノードはまだ存在します	現在のコンポーネントが削除され、関連コンテンツがクリアされました

これらの8つに加えて他の2つがあります

有効化	コンポーネントがアクティブ化されたときに呼び出されるキープアライブを使用し、フック内の関数は、コンポーネントが入るたびに実行されます
非アクティブ化	コンポーネントが削除されたときに呼び出されるキープアライブを使用します

13. vueにおけるKeyValueの役割は何ですか？？

Vueにヒントを与えて、各ノードのIDを追跡できるようにするために、既存の要素を再利用および並べ替えます。
データが変更されると、対応するオブジェクトのみが並べ替えられます。変更されていないオブジェクトは再作成されないため、効率が向上します。
重要な値は次のとおりです。各アイテムに一意のID（一意のID）があること

14. vueの計算されたプロパティは何ですか？

テンプレートにロジックを入れすぎると、テンプレートが重くなり、保守が難しくなります。データを複雑に処理する必要があり、複数回使用される可能性がある場合は、属性の計算方法を使用してみてください。

好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

15. 计算属性 computed 和 watch 的区别？

computed：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
watch：监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法；数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。

通俗来讲，既能用computed 实现又可以用 watch 监听来实现的功能，推荐用 computed，重点在于 computed 的缓存功能

可参考：Vue中计算属性和 watch的区别
vue中，计算属性 computed 和 watch 的区别

16. Vue路由有哪几种模式？

vue-router 有 3 种路由模式：hash、history、abstract

vue-router中默认使用的是hash模式，也就是会出现如下的URL，URL中带有#号：
HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，单页面并没有跳转
开启history模式后自动去除#，开启history模式需要后台配合；
我们可以用如下代码修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
    
    
  mode: 'history',
  routes: [
    {
    
    
      path: '/',
      component: Main
    }
  ]
})

可参考：
vue-router两种模式

17. Vue组件传值有哪几种方式？

1. 父传子

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可。

2. 子传父

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件；子组件给父组件传参用this.$emit(‘事件名’,携带的内容）,父组件在相应的位置监听事件

3. 非父子组件间传值

1.vue提供了很多套组件间传值的方法，父子组件直接用props和$emit就好，大型项目则用vuex，但有一种更适合在小项目中使用的非父子组件传值方法，即bus总线机制。

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
2.另外一种方法也可以，先从传到父组件，再传到子组件（相当于一个公共bus文件）

4. 路由传参

// 1.命名路由传参
this.$router.push({
    
     name: 'user', params: {
    
     user: 'nickname' }});
//页面接受
this.$route.params
// 2.查询参数传参
this.$router.push({
    
    path: '/user', query: {
    
    user: "nickname"}});
//页面接受
this.$route.query

可参考：
https://blog.csdn.net/weixin_45811256/article/details/109742189
https://blog.csdn.net/qq_42692851/article/details/105508934

18. $route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

19. vue中的单项数据流和双向数据绑定是什么意思？

单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据

双向数据绑定：是指数据和页面进行双向绑定，相互影响

20. Vue组件中的data为什么必须是一个函数？

因为如果默认为data是对象的话，对象为引用类型，这样的话，所有复用的组件都是引用的同一个数据，一个数据改变了其他也改变了。
但是如果是函数的话，只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

21. npm是什么？

NPM是一个node.js的包管理器。有了NPM这个包管理器，直接可以通过：

npm install xxx包名称

22. vue-cli是什么？？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过:

npm install -g @vue/cli

23. vuex是什么？怎么使用？哪种功能场景使用它？

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，…… export 。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations更改 Vuex 的 store 中的状态的唯一方法是提交 mutations。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions 包含任意异步操作，通过提交 mutation 间接更变状态。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({
    
     //store实例
      state: {
    
    
         count: 0
             },
      mutations: {
    
                    
         increment (state) {
    
    
          state.count++
         }
          },
      actions: {
    
     
         increment (context) {
    
    
          context.commit('increment')
   }
 }
})

Module
Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

24. Vue-route是什么？

Vue-route是vue的一个前端路由器，它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
路由就是根据网址的不同，返回不同的内容给用户。

25. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 this.$route.params.id获取。

26. 对keep-alive 的了解？？

ルートが切り替わるたびにajaxが送信されるため、ウェブページのパフォーマンスを最適化するにはkeep-aliveを使用する必要があります。
含まれているコンポーネントの状態を保持するか、再レンダリングを回避できます。

vue 2.1.0バージョン以降、keep-aliveは2つの新しい属性を追加しました：include（含まれるコンポーネントキャッシュ）とexclude（除外されるコンポーネントはキャッシュされない、優先度はincludeよりも大きい）。
指示

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

27.以前にスパタイプのプロジェクトを行ったことはありますか？どうやってそうなった？？

スパはシングルページアプリケーションであり、シングルページアプリケーションは主にルーティングによって実装されます。ルーティングは、さまざまなハッシュ値に従ってさまざまなコンポーネントを表示します。

28. vueカスタムコンポーネントにクリックイベントを追加するにはどうすればよいですか？？

素人の言葉で言えば、ネイティブイベントを親コンポーネントの子コンポーネントにバインドすると、子コンポーネントが通常のHTMLタグに変わり、「。native」イベントがないとイベントをトリガーできません。
@clickの後に追加する必要があります。.nativeネイティブの公式な解釈は次のとおりです。

.native-コンポーネントのルート要素のネイティブイベントをリッスンします

正しい書き方：

<my-button  @click.native="alert1()" names="删除" v-bind:item2="btdata"></my-button>

特定のケースについては、以下を参照してください。[vueでの「.native」修飾子の使用]
（https://blog.csdn.net/qq_29468573/article/details/80771625）
は、学術的な理由による可能性があり、回答は不完全です。または参照のためだけにいくつかの逸脱;あなたが偉大な神であり、何か間違っていることを見つけた場合は、他のシャオバイが私に導かれるのを防ぐために私を批判して修正してください。継続的に更新しています...