vueとreactの違いを簡単に話します

私はreactをずっと使っていて、vueについて簡単に勉強しただけで、その理解はあまり深くありません.それらの違いもネット上の牛人の見解から来ていることが多い.
1テンプレートでアプリケーションを構築するのが好きな場合(またはその考えがある場合)、Vueを選択してください.
Vueアプリケーションのデフォルトオプションは、HTMLファイルにmarkupを配置することです.データバインド式はAngularと似たmustache構文を使用し、命令(特殊なHTML属性)はテンプレートに機能を追加するために使用されます.例:

// HTML

    
{{ message }}
    Reverse Message

 // JS
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('');
        }
    }
});

2に対し、Reactアプリケーションはテンプレートを使用せず、開発者にJSXを利用してJavaScriptでDOMを作成するように要求します.次はReactで実装された同様のアプリケーションです.// HTML // JS (pre-transpilation) class App extends React.Component { constructor(props) { super(props); this.state = { message: 'Hello React.js!' }; } reverseMessage() { this.setState({ message: this.state.message.split('').reverse().join('') }); } render() { return (

{this.state.message}

this.reverseMessage()}> Reverse Message

) } } ReactDOM.render(App, document.getElementById('app'));

標準Web開発方式からの新規開発者にとってテンプレートの方が分かりやすい.しかし、一部のベテラン開発者もテンプレートが好きです.テンプレートはレイアウトと機能をよりよく分割することができ、Pugなどのテンプレートエンジンも使用することができます.

しかし、テンプレートを使用する代価は、すべてのHTML拡張構文を学習しなければならないことです.レンダリング関数には、標準的なHTMLとJavaScriptしか必要ありません.また、レンダリング関数はテンプレートよりもデバッグやテストが容易です.もちろんあなたはこの方面の原因でVueを逃すべきではありません.Vue 2にあるからです.0には、テンプレートまたはレンダー関数を使用するオプションがあります.

3簡単なものと「使えばいい」ものが好きなら、Vueを選んでください
簡単なVueプロジェクトは、翻訳を必要とせずにブラウザで直接実行できるので、Vueを使用することはjQueryを使用するように簡単です.もちろんこれはReactにとって技術的にも可能であるが、典型的なReactコードはJSXやclassのようなES 6特性に重度に依存する.Vueの簡単さはプログラム設計の時にもっと深く現れ、2つのフレームワークがアプリケーションデータをどのように処理しているか(つまりstate)を比較してみましょう.

Reactのstateは可変(immutable)であるため、直接変更することはできず、APIのsetStateメソッド:thisを使用する必要がある.setState({ message: this.state.message.split('').reverse().join('') });

Vueのデータは可変(mutated)なので、同じ操作がより簡潔に見えます.this.message = this.message.split('').reverse().join(''); Vueでステータス管理がどのように行われているかを見てみましょう.stateに新しいオブジェクトを追加すると、Vueはすべてのプロパティを遍歴しgetter、setterメソッドに変換され、Vueの応答システムはstateの追跡を維持し始め、stateの内容が変化すると自動的にDOMを再レンダリングします.Vueでstateの状態を変更する操作は、より簡潔であるだけでなく、Reactよりも速く、より効率的であると言える.

4.アプリケーションをできるだけ小さく、速くしたい場合は、Vueを選択してください.

アプリケーションの状態が変化すると、ReactとVueは仮想DOMを構築し、実際のDOMに同期します.VueのレンダリングシステムはReactよりも速いです.

しかし、ページサイズはすべてのプロジェクトに関連しており、Vueは再びリードしており、現在のバージョンは25.6 KBしか圧縮されていません.Reactが同じ機能を実現するには、React DOM(37.4 KB)とReact with Addonライブラリ(11.4 KB)の合計44.8 KBが必要で、ほぼVueの2倍の大きさです.2倍の体積は2倍の機能をもたらすことはできません.

5大規模なアプリケーションを構築する場合は、Reactを選択します.

記事の冒頭のように、VueとReactを同時に実装する簡単なアプリケーションは、開発者の潜在意識の中でVueに傾く可能性があります.これは、テンプレートベースのアプリケーションが一目でより理解しやすく、すぐに走ることができるからです.しかし、これらのメリットが導入された技術債は、アプリケーションのより大きな規模への拡張を阻害します.テンプレートは、実行時のエラーに気づきにくく、テスト、再構築、分解も困難です.

と比較して、Javascriptテンプレートは分解性とドライ(DRY)コードのコンポーネントに組織することができ、ドライコードの再利用性とテスト性がより良い.Vueにはコンポーネントシステムとレンダリング関数もありますが、Reactのレンダリングシステムは構成性が強く、浅い(shallow)レンダリングなどの特性もあり、Reactのテストツールと組み合わせて使用し、コードのテスト性とメンテナンス性を向上させます.

6 Web端末とオリジナルアプリを同時に適用するフレームワークがほしい場合は、Reactを選択してください
React Nativeは、Javascriptを使用してモバイル端末のオリジナルアプリケーションiOS、Androidを構築するライブラリです.Reactと同じで、Webコンポーネントではなくオリジナルコンポーネントを使用します.もしあなたがReactを学んだら.jsは、すぐにreact nativeを手に入れることができます.逆も同じです.
7最大の生態系を望む場合はReactを選択してください
まとめ:
Vueのメリットは次のとおりです.

テンプレートとレンダリング関数の弾性選択

簡単な構文とプロジェクト構成

レンダリング速度が速く、ボリュームがより小さい

Reactのメリットは次のとおりです.

は、大規模なアプリケーションに適しており、よりテスト可能な

です.

Web端末とモバイル端末のオリジナルアプリは

通食している.

より大きな生態系、より多くのサポートと使いやすいツール

ReactとVueの類似点:

仮想DOMによる高速レンダリング

軽量級

応答型コンポーネント

サービス側レンダリング

統合ルーティングツール、パッケージングツール、ステータス管理ツールの難易度が低い

優れたサポートとコミュニティ