前端面接問題のvue.js

3874 ワード
webフロントエンド

 
自分の経験からvueに関する面接問題を10問まとめましたが、最も完全ではありませんが、最も一般的なものに違いありません.(GitHubアドレス:https://github.com/OmegaMibai)
 
 
 
 
1.mvvmと他のフレームワーク(jquery)の違いは何ですか?どんなシーンが似合いますか? 
答え:区別:vueデータ駆動、データによってノード操作ではなく視層を表示する; 
シーン:データ操作が多いシーンで、より便利です.
 2.少なくとも4種類のvueの中の命令とその使い方を言いますか? 
答え:v-if:隠すかどうかを判断する;
v-for:データがループします.
v-bind:class:プロパティをバインドします.
v-model:双方向バインドを実現します.
3.vueの長所は何ですか.
答え:低結合、再利用可能、性独立開発、テスト可能.
4.vueのライフサイクル
答え:vueインスタンスの作成から破棄までのプロセスは、ライフサイクルです.つまり、データの作成、初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなどの一連のプロセスから、Vueのライフサイクルと呼ばれています.(簡単な説明)
全部で8つの段階に分けられます:(詳細は)
beforeCreate---作成前
コンポーネントインスタンスはさらに作成され、コンポーネント属性計算の前にデータオブジェクトdataはundefinedであり、初期化されていない.
作成後
コンポーネントインスタンスの作成が完了し、プロパティがバインドされ、データオブジェクトdataが存在しますが、domは生成されません.$elは存在しません.
beforeMount---マウント前
vueインスタンスの$elとdataは初期化され、マウント前は仮想domノード、dataである.メッセージが置換されていません
mounted-----マウント後
vueインスタンスのマウント完了、data.Messageは正常にレンダリングされました.
beforeUpdate---更新前
dataが変化すると、beforeUpdateメソッドがトリガーされます
更新後
dataが変化するとupdatedメソッドがトリガーされます
beforeDestory---破棄前
コンポーネント破棄前に呼び出す
destoryed---破棄後
コンポーネントが破棄された後に呼び出され、dataの変更はサイクル関数をトリガーしません.vueインスタンスはイベントリスニングとdomバインドを解除しましたが、dom構造は依然として存在します.
 
5.コンポーネント間の通信?
答え:親コンポーネントから子コンポーネントへの値の転送:1)サブコンポーネントはpropsで親コンポーネントからの値を受信するための属性を作成します.2)親コンポーネントに子コンポーネントを登録する.3)サブアセンブリラベルにサブアセンブリpropsで作成した属性を追加する.4)サブコンポーネントに伝達する必要がある値をこの属性サブコンポーネントに付与して親コンポーネントに伝達する:1)サブコンポーネントでは、イベントをクリックするなどの何らかの方法でカスタムイベントをトリガーする必要がある.2)送信する必要がある値を$emitの2番目のパラメータとし、この値は応答イベントに実パラメータとして送信される方法である.3)親コンポーネントにサブコンポーネントを登録し、サブコンポーネントラベルにカスタムイベントのリスニングをバインドします.
 
6.mvvmとmvcの違いは?
答え:mvcとmvvmの違いは大きくありません.すべて設計思想です.主にmvcにおけるControllerがmvvmにおけるviewModelに進化する.mvvmは主にmvcにおける大量のDOM操作によりページレンダリング性能が低下し、ロード速度が遅くなり、ユーザー体験に影響を与えることを解決した.とModelが頻繁に変化する場合、開発者は積極的にViewに更新する必要があります.
7.MVVMとは
A:Model View VM
Modelはデータ、dataです.Viewはテンプレートです.VMはvm=new Vue()である.                                                                                                     
VMは接続データとビューを使用し、ビューの入力ボックスはv-modelにバインドされ、ユーザーが入力するとdataが変更されます.Modelの変更は、ビューの更新に関連する依存性を同期させ、双方向バインドがvmとして機能します.
8.コンポーネント間のジャンプ方法
①アドレスバーのルーティングアドレスを直接変更する
②router-linkによるジャンプ:                < router-link   to = "/myRegister" > router-link >
③jsによるプログラミング方式:                 jumpToLogin:  function   () {                       this .$router.push( '/myLogin' );                   }
9.vueでのドメイン間問題の解決
答え:1バックグラウンドでヘッダーを変更する(最も一般的で最もよく使われる解決策):
           header('Access-Control-Allow-Origin:*');//すべてのソースへのアクセスを許可
           header('Access-Control-Allow-Method:POST,GET');//アクセスを許可する方法
②JQueryが提供するjsonpを使用:
          methods: { 
                getData () { 
                     var self = this 
                     $.ajax({ 
                     url: 'http://f.apiplus.cn/bj11x5.json', 
                     type: 'GET', 
                     dataType: 'JSONP', 
                     success: function (res) { 
                     self.data = res.data.slice(0, 3) 
                     self.opencode = res.data[0].opencode.split(',') 
                              } 
                            }) 
                        } 
                   }

③http-proxy-middlewareエージェントを使用して解決(プロジェクトはvue-cli足場で構築)
10.es 6常用文法(5つでいい)
答え:1.変数宣言constとlet;
       2. テンプレート文字列;
       3.矢印関数;
       4. importインポートモジュール、exportエクスポートモジュール;
       5. promise
 
 
 
Uni-appグローバル変数の実装
jsデータ双方向バインドの実現