vueフレームワークとreactフレームワークの違いは何ですか?

違い: 1. vue のデータは Vue オブジェクト内で data 属性によって管理され、react のデータは state 属性によって管理されます; 2. Vue はスロットを通じてネストされた送信を実行し、react は " props.children」メソッドを使用して、タグ内の部分を子コンポーネントに渡します。

#1. Vue フレームワークと React フレームワークの違い#

模板和jsx、状态管理、组件嵌套条件渲染、列表渲染、组件间的通信传值、路由管理

1. テンプレートと jsx

##vue

: Vue.js は、HTML ベースのテンプレートを使用し、独自の処理メソッドを使用して html、css、js を組み合わせます。この構文を使用すると、開発者は DOM を基礎となる Vue インスタンスのデータに宣言的にバインドできます。 Vue.js の核心は、簡潔なテンプレート構文を使用してデータを宣言的に DOM にレンダリングできるようにするシステムです。

react

: HTML 言語は引用符なしで JavaScript 言語で直接記述されており、簡単に言えば、これは JSX の構文です。 HTML と JavaScript の混合を許可します。

#2. 状態管理

vue

: データは次の方法で Vue オブジェクトに保存されます。データ属性を管理します。

react

: データは state 属性によって管理されますが、状態を直接変更することはできないため、setState() を通じて更新する必要があります。

3. コンポーネントのネスト

vue

: スロットを介したネスト

親コンポーネントのネストされた子コンポーネント ラップ

子コンポーネント ラップ

レンダリング結果

#react: タグ内の部分を props.children を通じて子コンポーネントに渡します

親コンポーネントのネストされた子コンポーネントWrap

子コンポーネント Wrap

4. 条件付きレンダリングとリスト レンダリング

vue 条件付きレンダリング: v-if、v-show 一連の数値の条件付きレンダリング。

vue list rendering: v-リストレンダリング用の一連の数値。

条件付きレンダリングに反応する: 論理演算 && || と三項演算子を使用して、現在の状態を表す要素を作成します。

反応リストのレンダリング: {} を使用して JSX で要素のコレクションを構築し、map() メソッドを使用して配列を走査します。

5. コンポーネント間の通信値

vue:

親が渡すもの子: 親コンポーネントを介してカスタム プロパティをバインドします (または、v-bind を介して動的プロパティをバインドします)。子コンポーネントは、props オプションを使用するときに明示的に props を宣言するため、親コンポーネントから期待されるデータを受け取ることができます。

子から親に渡す: 親コンポーネントを介してカスタム イベントをバインドし、子コンポーネントは this.emit('カスタム イベント', value) を介して値を渡します。 非親子: 空の Vue インスタンスを使用して、イベント バス センターとして Vue インスタンスのプロトタイプにバインドし (vue.prototype.eventBus = new Vue())、エミットを使用してイベントをトリガーできます。イベントをリッスンします。
親コンポーネント 1

子コンポーネント 1-1

react:

親から子に渡す: props 属性を渡します。

子から親への受け渡し: 親コンポーネントはイベントを定義します。子コンポーネントが親コンポーネントのイベントをトリガーすると、親コンポーネントのデータを実際のパラメータの形式で変更することで通信します。 非親子: ネストが深くない非親子コンポーネントは共通の親コンポーネントを持つことができ、ネストが深い場合は redux を使用して状態を共有できます。
親コンポーネント

子コンポーネント

6 、ルーティング管理

vue-router はグローバル設定メソッドであり、vue-router のルーティング コンポーネントはすべて の位置にレンダリングされます。

#react-router はグローバル コンポーネント モードであり、react-router サブコンポーネントが渡されます。子として 親コンポーネントを入力します。

2. Vue フレームワークと React フレームワークの類似点

コンポーネント化: React と Vue はどちらも、アプリケーションを明確な機能を持つコンポーネント モジュールに分割することを推奨します。このようなコンポーネント化により、構造が明確になり、再利用が容易になります。

Virtual Dom: ページを効率的にレンダリングし、パフォーマンスの消費を削減するために、Virtual Dom が採用されています。

コンパニオン フレームワーク: どちらのフレームワークも UI 層に焦点を当てており、ルーティング、状態管理 (vuex、redux) などのその他の機能はコンパニオン フレームワークによって処理されます。

ビルドツール: React は Create React App (CRA) を使用できますが、Vue は vue-cli に対応します。

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング教育をご覧ください。 ！

以上がvueフレームワークとreactフレームワークの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。