Vue.observable 関数の詳細な説明と、それを使用して応答性の高いデータを作成する方法
Web アプリケーションを開発する場合、多くの場合、異なるコンポーネント間でデータを共有する必要があります。 Vue.js は、リアクティブ データを作成することで、この問題を解決するシンプルかつ強力な方法を提供します。 Vue.observable 関数は、Vue.js 2.6 以降に導入された新機能で、監視可能なオブジェクトを簡単に作成できるようになります。
Vue.observable 関数の機能は、通常の Javascript オブジェクトを監視可能なオブジェクトに変換することです。監視可能なオブジェクトの特性は、その内部プロパティが変更されると、これらのプロパティに依存するすべての場所に更新を通知することです。この方法では、データの変更を手動で管理する必要はなく、Vue.js に自動的に行わせます。
Vue.observable 関数を使用してレスポンシブ データを作成する方法を見てみましょう。
まず、Vue.js をインストールして導入する必要があります:
次に、通常の Javascript オブジェクトを作成します:
const data = {
name: 'Alice',
age: 25,
email: 'alice@example.com'
};
次に、Vue.observable 関数を使用して、この通常のオブジェクトを監視可能なオブジェクトに変換します。
const observableData = Vue.observable(data);
さて、observableData は監視可能なオブジェクトです。通常のオブジェクトを使用するのと同じように、そのプロパティを直接使用できます:
console.log(observableData.name); // 出力: Alice
アクセスする場合のみであることに注意してください。監視可能なオブジェクトのプロパティの変更は、Vue.js によって追跡されます。監視可能なオブジェクトを作成した後に元のオブジェクトを変更しても、Vue.js は認識しません。
この監視可能なオブジェクトを他のコンポーネントで使用することもできます。コンポーネント A とコンポーネント B があり、どちらもこの監視可能なオブジェクトを使用する必要があるとします。
コンポーネント A コード:
<h1>{{ observableData.name }}</h1>
<p>{{ observableData.age }} years old</p>
<script><br>デフォルトのエクスポート {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { observableData: observableData }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>
コンポーネント B コード:
<input v-model="observableData.email" type="email">
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
