Cara menggunakan Vue.observable untuk mencipta objek yang boleh diperhatikan dalam Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri, termasuk objek yang boleh diperhatikan. Observable ialah objek reaktif yang memberitahu semua komponen dan sifat yang bergantung padanya apabila ia berubah. Vue.observable ialah fungsi yang digunakan untuk mencipta objek boleh diperhatikan. Artikel ini akan memperkenalkan kaedah pelaksanaan dan senario biasa Vue.observable.

1. Penggunaan asas Vue.observable

Pertama sekali, menggunakan Vue.observable dalam Vue memerlukan pengenalan fail Vue.js. Kaedah menggunakan Vue.observable adalah sangat mudah Anda hanya perlu memanggil fungsi Vue.observable dalam contoh Vue dan memasukkan objek yang anda ingin buat.

Sebagai contoh, kita boleh mencipta objek boleh diperhatikan dengan cara berikut:

import Vue from 'vue';

const observableObj = Vue.observable({ 
  count: 0 
});

Objek yang dibuat dalam Vue.observable akan mempunyai keupayaan responsif dan akan dikemas kini secara automatik apabila sifatnya berubah dan menyegarkan komponen yang bergantung kepadanya.

Sebagai contoh, gunakan objek ini dalam komponen:

<template>
  <div>
    {{ count }}
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { observableObj } from './path/to/observable.js';

export default {
  computed: {
    count() {
      return observableObj.count;
    }
  },
  methods: {
    increment() {
      observableObj.count++;
    }
  }
};
</script>

Pada masa ini, apabila pengguna mengklik butang, sifat kiraan objek boleh diperhatikan dikemas kini secara automatik dan pengiraan ini harta digunakan dalam komponen Sifat juga dikemas kini dan dimuat semula secara automatik.

2. Penggunaan lanjutan Vue.observable

Dalam Vue.observable, kita bukan sahaja boleh mencipta objek mudah, tetapi juga mencipta tatasusunan atau objek bersarang sebagai data responsif. Apabila mencipta objek yang boleh diperhatikan, hanya sifat atau objek yang diakses secara langsung akan menjadi reaktif.

Sebagai contoh, dalam kod berikut, kami mencipta objek bersarang yang boleh diperhatikan dan tatasusunan reaktif:

const observableObj = Vue.observable({
  nestedObj: {
    message: 'Hello, world!'
  },
  
  items: ['jacket', 'shirt', 'pants'],

  addItem(item) {
    this.items.push(item);
  }
});

Dalam komponen, kami boleh menggunakan sifat atau kaedah yang dikira untuk mengakses objek dan tatasusunan ini :

<template>
  <div>
    <p>{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem('shoes')">Add Item</button>
  </div>
</template>

<script>
import { observableObj } from './path/to/observable.js';

export default {
  computed: {
    message() {
      return observableObj.nestedObj.message;
    },
    items() {
      return observableObj.items;
    }
  },
  methods: {
    addItem(item) {
      observableObj.addItem(item);
    }
  }
};
</script>

Dalam contoh ini, kami menggunakan sifat dan kaedah yang dikira untuk masing-masing mengakses objek bersarang dan tatasusunan reaktif. Apabila item baharu ditambahkan, tatasusunan dalam komponen akan mengemas kini dan memuat semula secara automatik.

3. Kesimpulan

Vue.observable ialah ciri yang sangat berguna dalam rangka kerja Vue. Ia menyediakan cara mudah untuk mencipta objek yang boleh diperhatikan. Hanya gunakan fungsi Vue.observable untuk mencipta objek dengan keupayaan responsif Apabila objek digunakan dalam komponen, ia akan mengemas kini dan menyegarkan semula komponen dan sifat yang bergantung padanya secara automatik. Dengan memahami penggunaan Vue.observable, anda boleh membuat data reaktif dengan lebih mudah dalam aplikasi Vue anda.

Atas ialah kandungan terperinci Cara menggunakan Vue.observable untuk mencipta objek yang boleh diperhatikan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!