2022 Vue の最新の面接の質問
1. Vue の概要:
vue的使用方式有两种
方式一:像jQuery一样引入使用--vue的特性都可以使用，双向数据绑定
方式二：跟node结合起来使用，使用的时候有点像java语言（面向对象）
2. vue を使用する理由 (Vue を使用する利点は何ですか)? MVVM フレームワークはたくさんありますか? MVVMとMVCの違いは何ですか? どの MVVM フレームワークを知っていますか?
2.1. Vue の利点:
vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
2.2、MVVMの定義:
MVVM は、Model-View-ViewModel の短縮形です。つまり、Model-View-ViewModel です。[モデル] は、バックエンドによって渡されるデータを指します。[View]とは、表示されているページを指します。[View Model] mvvm パターンの中核であり、ビューとモデルを接続するブリッジです。これには 2 つの方向があります。1 つは [モデル] を [ビュー] に変換すること、つまり、バックエンドによって渡されたデータを表示されるページに変換することです。それを実現する方法は、データ バインディングです。2つ目は、[ビュー]を[モデル]に変換する、つまり閲覧したページをバックエンドデータに変換することです。これを実現する方法は、DOM イベントの監視です。両方向が実装されており、これをデータの双方向バインディングと呼びます。概要: MVVM のフレームワークでは、ビューとモデルは直接通信できません。これらは ViewModel を通じて通信します。ViewModel は通常、オブザーバーを実装します。データが変更されると、ViewModel はデータの変更を監視し、対応するビューに自動更新を通知します。ユーザーがビューを操作すると、ViewModel も監視できます。ビューの変更に対して、データに変更を通知することで、実際にデータの双方向バインディングが実現されます。MVVM の View と ViewModel は相互に通信できます
2.3. MVC の定義:
MVC は Model-View-Controller の略です。それがModel-View-Controllerです。M と V は、MVVM の M と V と同じ意味を指します。C は、コントローラーがページのビジネス ロジックを参照することを意味します。MVC を使用する目的は、M コードと V コードを分離することです。「MVC は一方向の通信です。つまり、ビューとモデルはコントローラーを介して接続される必要があります。MVC と MVVM の違いは、VM が C を完全に置き換えることではありません。ViewModel の目的は、コントローラーに表示されるビジネス ロジックを抽出することであり、コントローラーを置き換えることではありません。他のビュー操作はコントローラーで実装する必要があります。つまり、MVVMはビジネスロジックコンポーネントの再利用を実現します。mvc は比較的初期に登場したため、フロントエンドがそれほど成熟しておらず、多くのビジネス ロジックもバックエンドに実装されているため、フロントエンドには実際の MVC モデルがありません。そして、今日もう一度 MVC について触れましたが、これは大きなフロントエンドの登場、MVVM パターンのフレームワークの登場により、MVVM の設計パターンがどのように段階的に進化したかを理解する必要があるためです。2. MVVM フレームワークがあるのはなぜですか? 過去 10 年間、私たちは多くの従来のサーバーサイド コードをブラウザーに組み込んできました。その結果、さまざまな HTML および CSS ファイルを接続する数万行の JavaScript コードが作成されましたが、正式な組織形式が欠如していました。 JavaScript フレームワークを使用する開発者も増えています。例: angular、react、vue。ブラウザの互換性の問題はフロントエンドの障害ではなくなりました。フロントエンド プロジェクトはますます大規模になり、プロジェクトの保守性、拡張性、セキュリティが大きな問題になっています。ブラウザの互換性の問題を解決するために、多くのクラス ライブラリが登場しましたが、その代表的なものが jquery です。しかし、この種のライブラリはビジネスロジックの分割が実現されていないため、保守性や拡張性が非常に悪いです。上記 2 つの理由をまとめると、MVVM パターンのようなフレームワークの登場です。たとえば、vue はデータの双方向バインディングにより、開発効率を大幅に向上させます。3. MVVM フレームワーク: VUE の概要 Vue は MVVM パターンに基づいた一連のフレームワークです Vue では: モデル: オブジェクト、配列などの js 内のデータを指します。View: ページ ビューを参照します。 viewModel: vue インスタンス化オブジェクトを参照します。 VUE が進歩的な JavaScript フレームワークであると言われる理由は、プログレッシブとはどういう意味ですか? 1. すでに既製のサーバー アプリケーションをお持ちの場合は、アプリケーションの一部として vue を埋め込んで、より豊かなインタラクティブなエクスペリエンスを実現できます; 2. フロントエンドにさらに多くのビジネス ロジックを実装したい場合は、VUE のコア ライブラリとそのエコシステムはさまざまなニーズ (core+vuex+vue-route) にも対応できます。他のフロントエンド フレームワークと同様に、VUE を使用すると、Web ページを再利用可能なコンポーネントに分割できます。各コンポーネントには、Web ページ内の対応する場所をレンダリングするための独自の HTML、CSS、および JAVASCRIPT が含まれています。3. 大規模なアプリケーションを構築する場合、この時点で、独自のコンポーネントとファイルに分割する必要がある場合があります。Vue には、実際のプロジェクトを迅速に初期化するのを非常に簡単にするコマンド ライン ツールがあります (vue init webpack my -計画）。独自の HTML、JavaScript、スコープ指定された CSS または SCSS を含む、VUE の単一ファイル コンポーネントを使用できます。上記の 3 つの例は段階的に進歩しています。つまり、VUE の使用は規模の大小にかかわらず、プロジェクトに統合するための対応する方法を備えています。つまり、これは進歩的なフレームワークです。VUE の最もユニークな機能: レスポンシブ システム VUE はリアクティブです。つまり、データが変更されると、VUE は Web ページ内で VUE が使用されているすべての場所を更新するのに役立ちます。大規模なアプリケーションを構築している場合、この時点で独自のコンポーネントとファイルに分割する必要があるかもしれません。vue には実際のプロジェクトを簡単に初期化できるコマンド ライン ツールがあります (vue init webpack my-project) 。独自の HTML、JavaScript、スコープ指定された CSS または SCSS を含む、VUE の単一ファイル コンポーネントを使用できます。上記の 3 つの例は段階的に進歩しています。つまり、VUE の使用は規模の大小にかかわらず、プロジェクトに統合するための対応する方法を備えています。つまり、これは進歩的なフレームワークです。VUE の最もユニークな機能: レスポンシブ システム VUE はリアクティブです。つまり、データが変更されると、VUE は Web ページ内で VUE が使用されているすべての場所を更新するのに役立ちます。大規模なアプリケーションを構築している場合、この時点で独自のコンポーネントとファイルに分割する必要があるかもしれません。vue には実際のプロジェクトを簡単に初期化できるコマンド ライン ツールがあります (vue init webpack my-project) 。独自の HTML、JavaScript、スコープ指定された CSS または SCSS を含む、VUE の単一ファイル コンポーネントを使用できます。上記の 3 つの例は段階的に進歩しています。つまり、VUE の使用は規模の大小にかかわらず、プロジェクトに統合するための対応する方法を備えています。つまり、これは進歩的なフレームワークです。VUE の最もユニークな機能: レスポンシブ システム VUE はリアクティブです。つまり、データが変更されると、VUE は Web ページ内で VUE が使用されているすべての場所を更新するのに役立ちます。
3. Vue にはどのようなフック関数がありますか? 役割は何ですか? Vue のライフサイクル
1 初始化前 --BeforeCreated
2 初始化完成 ---***：发送ajax --created //比较常用
3 双向数据绑定前 ---BeforeMount
4 双向数据绑定完成 --Mounted
5 更新前 --BeforeUpdate
6 更新完成--updated
7 销毁前--BeforeDestroyed
8 销毁完成--Destroyed
4. vue でデータをレンダリングするときに、データがそのまま出力されるようにするにはどうすればよいですか?
1. v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
2. v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
3. {
{
}}：插值表达式，可以直接获取Vue实例中定义的数据或函数，
使用插值表达式的时候，值可能闪烁；而使用v-html、v-text不会闪烁，
有值就显示，没值就隐藏
5. vue でのメソッドと計算の違いは何ですか? 応用シナリオは何ですか?
1.methods：方法，函数，绑定事件调用；不会使用缓存
2.computed： 计算属性 本质是方法，使用时可以像属性一样使用，
当操作的值没有发生改变时，会使用缓存，当值发生改变，才会改变；提高速度
6. Vue でネイティブ DOM イベントを処理するにはどうすればよいですか?
答：6.1 DOM：HTML DOM 定义了访问和操作 HTML 文档的标准 方法。
DOM 将 HTML 文档表达为树结构。我们可以通过DOM灵活的获取树节点，
并且操作节点（重新设置值、重新设置属性、重新设置样式）
6.2 DOM事件：
onclick、onmouseover、onmouseout、onchange、onkeyup、onkeydown
6.3 Vue是如何处理的：通过v-on，简写@的方式定义事件
@click、@mouseover、@mouseout、@change、@keyup、@keydown...
并绑定函数
7. jsバブリングとは何ですか? Vue でバブリングイベントを防ぐにはどうすればよいですか?
js冒泡概念：当父元素内多级子元素绑定了同一个事件，js会依次从内往外或者从外往内执行每个元素的该事件，从而引发冒泡
js解决冒泡：event.stopPropagation()
vue解决冒泡： 事件修饰符.stop,例如：@click.stop="" ,@mouseover.stop=""
8. jsのコールバック地獄とは何ですか? なぜコールバック地獄を引き起こすのでしょうか? コールバック地獄の問題を解決する方法
js的回调地狱：根据外层ajax请求的结果，将结果作为参数继续发起ajax请求
--->引起回调地狱
getA().then(res=>{
getB(res.data.a).then(res=>{
getC(res.data.b).then(res=>{
//....回调地狱
})
})
})
Promise 对象就是为了解决这个问题而提出的。
它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。
getA().then(res=>{
return getB(res.data.a)
}).then(res=>{
//.....链式调用
})
9. Vue で親子コンポーネントはどのように値を渡しますか?
父向子 - props
子向父 - $emit
兄弟之间 - eventBus
9.1 父向子传值：子组件定义的时候，
通过props:['num']定义父组件传值的参数名，
当父组件调用子组件的时候就通过:num="a"的方式将值传给子组件
9.2 子向父传值：无法直接传值，只能通过子类调用父类的方法，使用方法的参数传值
在子组件的方法中通过$.emit("outshow",num)传值，第一个参数是父组件中的方法名，第二个参数是父组件中该方法的参数
11. Vue のイベント修飾子とその関数
vue中的事件：@click、@mouseover、@mouseout、@change、@keyup、@keydown
vue中的事件修饰符：.stop 阻止冒泡 .prevent:阻止默认事件
12. Vue の指示は何ですか?
v-if
v-else-if
v-else
v-for
v-text
v-html
v-model
v-on：简写@
v-bind：简写：
13. フロントエンドとバックエンドを分離する必要があるのはなぜですか? フロントエンドとバックエンドを分離するメリットは何ですか? デメリットはどこにあるのでしょうか？
前端专门负责前端页面和特效的编写
后端专门负责后端业务逻辑的处理
前端追求的是页面美观、页面流畅、页面兼容等
后端追求的是三高（高并发、高可用、高性能）
让他们各自负责各自的领域，让专业的人负责处理专业的事情
提高开发效率
缺点：1 当接口发生改变的时候，前后端都需要改变
2 当发生异常的时候，前后端需要联调--联调是非常浪费时间的
14. フロントエンドとバックエンドの分離の開発モデルについての理解について話す
1.前端静态化
前端有且仅有静态内容,再明确些,只有HTML/CSS/JS.
其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
前端内容的运行环境和引擎完全基于浏览器本身.
2.后端数据化
后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则 ： 只提供数据,不提供任何和界面表现有关的内容.
3.平台无关化
前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现.
4.构架分离化
后端构架几乎可以基于任何语言和平台的任何解决方案,
大型构架方面, RestTful Api可以考虑负载均衡;而数据,
业务实现等可以考虑数据库优化和分布式
但总而言之,前后端的分离 也实现了 前后端构架的分离.