vue の選択は、react と angular の間で行われます。フレームワーク自体の構文は、react よりも少し多くなりますが、angular よりは少し少なくなります。
選択肢が違うからこそ、提示される書き方や思考方法は、良いか悪いかは別として、確実に好みの違いに繋がります。
React のシンプルさは、そのコア API が実際には非常に少ないことです。そのため、React は実際には UI ライブラリであり、完全なフレームワークではないという主張を多くの場所で目にすることになります。彼は、コンポーネントの作成方法とコンポーネント間でデータを転送する方法を説明するだけです。コンポーネントを作成する方法でも、ES6 のクラス構文を使用します (createClass は React 16 では破棄されます)。
したがって、開発での React の使用は、ES6 の構文に大きく依存します。なぜなら、react 自体にはそれほど制限的な構文がないからです。コンポーネントのprops、state、ref、ライフサイクルをマスターするだけで、追加の知識はあまりないようです。 jsx テンプレートでレンダリングをトラバースしたい場合でも、ネイティブ マップ メソッドを使用する必要があります。 React の上位コンポーネントについては、理解してみると、実は JavaScript の関数型プログラミングの考え方であることがわかりました。
つまり、私の意見では、react の最大の特徴は、シンプルでネイティブ JavaScript に非常に近いことです。つまり、開発者にもたらす制約はほとんどありません。関数を実装するには、ネイティブ JavaScript を使用して関数を実装する方法を知っていれば、react を使用して関数を実装する方法を簡単に知ることができます。
もちろん、シンプルなコア API だからといって、簡単に始めることができるわけではありません。使い始めは経験が足りないと、react で書いたページのパフォーマンスが非常に悪い場合があります。意図せずして、コンポーネントに冗長なレンダリングが大量に含まれる可能性があるためです。
たとえば、多くの人が反応を学習しているときに、カウントダウンの例に遭遇するでしょう。この例は、コンポーネントの状態を変更することで実装されています。しかし実際には、このアプローチは非常に間違っていることに誰もが徐々に気づくでしょう。状態が変更されるたびに、コンポーネントとそのすべてのサブコンポーネントが再レンダリングされるためです。これは非常にコストのかかる行為です。もちろん、デバッグ時に反応する際、レンダリングが高頻度で繰り返されるため、多くの人がブラウザを直接フリーズしてしまうことも知っています。これらの問題は制限が少なすぎるために発生するため、You Yuxi 氏は懸念しています。
インターネット上で自分がすごいと思っている人たちは、react/vue のようなフレームワークを使っているのに、実際には同じコードを書いているのですが、恐ろしいのは、いまだにあれこれと嘲笑していることです。また、Angular を長年使用していると言い続けた人にも会いました。彼は、Angular は本当にゴミで、パフォーマンスが非常に悪く、最終的にはトラックさえ使用できなかったと言いました。による。飲む！
そして、react には実際の双方向バインディングがありません。したがって、複雑なフォーム検証など、一部の複雑なシナリオに対処するのは非常に面倒になります。
比較的、vue はより多くの機能を提供しており、いくつかの簡単なコードだけで多くの効果を実現できるため、これらの便利な機能は初心者にとって非常に嬉しいものです。個人的に素晴らしいと思う機能をいくつか挙げてみます:
JavaScript 式は、vue であっても React であっても、表現する機能が不可欠です。ただし、Vue の公式ドキュメントに記載されているように、テンプレートにロジックを入れすぎると、テンプレートが重くなりすぎて保守が困難になります。 Vue コンポーネントは、式を均一に管理するための計算プロパティを提供します。
<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: 'example',
data () {return {message: 'Hello'
}
},computed: {reversedMessage: function() {return this.message.split('').reverse().join('')
}
}
}</script>クラスの動的な構文はとても幸せな気分にさせてくれます
実際には、要素クラスの特定の値をさまざまな状態に基づいて決定する必要があるようなシナリオがたくさん見つかります。そして、jsx テンプレートに以下のような単純な式や条件判定しかない場合、非常に不快な気持ちになります
<p className={active ? 'note active' : 'note'}></p>このように少し複雑なロジックを扱うと、耐えられなくなります。 vue でサポートされている構文を使用すると、この問題は非常に簡単に解決されます。
// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}
<p class={pcls}></p>このようにして、さらにクラス名を追加し続けても、さらに複雑になることはありません。
もちろん、これはツールのメソッドで解決できる問題にすぎません。react を使用する場合は、クラス名を使用して同じ関数を完成させることができます。しかし、vue はそれを直接サポートしています。
双方向バインディング
React は双方向バインディングをサポートしていないため、複雑なフォーム検証を実装するのは非常に困難です。 Vue は一方向のデータ フローを核としますが、双方向のバインディングを完全に放棄するわけではないため、このような複雑なフォーム検証シナリオにおける開発効率は React よりもはるかに高くなります。これは、トラブルを回避する vue の側面でもあります。
Modifier
イベント処理ロジックを記述するとき、e.preventDefault やその他の操作が必要になることがよくあります。 vue が提供する修飾関数は、これらのコードを保存するのに役立ち、非常に便利です。使えば使うほど、本当に使いやすいことが分かります。
<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>
もちろん、キー修飾子などもあります。詳細については、公式 Web サイトにアクセスしてください。
Vue には便利で素敵な構文糖衣が多数用意されているので、詳細は説明しません。公式 Web サイトで 1 つずつ体験できます。記事の冒頭で述べたように、Vue にはいくつかの文法制限があり、これらの文法制限により開発コストが削減され、開発効率がある程度向上します。おそらくこれが、多くの人が vue の方がシンプルで学びやすいと考える理由です。
学習の容易さの観点から見ると、react を始めるのがより難しい主な理由は、react 自体によるものではなく、react を取り巻く豊かなエコシステムによるものです。 React 自体は非常にシンプルであるため、より多くの React コンポーネントを習得する必要があります。反応ルーター、反応リダックスなど。また、十分な知識がなかった私たちが知らなかった、優れた機能を備えた便利なコンポーネントもたくさんあります。例えば、ant-designのソースコードを勉強していると、「こんな使い方もできるコンポーネントがあるんだ！」と驚かれることがよくあります。そして、Vue を学習していたとき、Vue がすでにこれほど優れたコンポーネントをサポートしていることに気づき、驚きました。
それで、後で、vue と React が非常に似ていることに気づきました。
私はまだ反応することを好みます。ただし、react の構文が ES6 に近いという理由だけで
以上が反応とvueの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
