Menyelam mendalam ke dalam proses reaktif dengan Vue.js

Vue.js ialah rangka kerja JavaScript popular yang membolehkan anda membina antara muka pengguna yang responsif. Pada terasnya, Vue.js ialah sistem reaktif yang membolehkan anda membuat model data dan mengemas kini paparan secara automatik apabila data berubah. Dalam artikel ini, kami akan mendalami proses reaktif Vue.js.

Proses reaktif Vue.js

1. Reaktif data

Dalam Vue.js, anda boleh menggunakan Vue({…}) baharu untuk Mencipta Vue contoh. Kejadian Vue mempunyai sifat data yang mengandungi objek JavaScript yang digunakan sebagai model data. Sifat data ini akan menjadi sebahagian daripada sistem reaktif Vue.js.

Vue.js mengemas kini paparan secara automatik apabila anda menukar sifat objek. Untuk memahami cara Vue.js melakukan ini, kita perlu memahami cara data reaktif.

Apabila anda menghantar objek kepada pembina Vue sebagai sifat data, Vue.js melelaran melalui keseluruhan objek dan menukar setiap sifat menjadi pengumpul dan penetap menggunakan kaedah Object.defineProperty(). Kaedah ini membolehkan Vue.js menggunakan "pemintas" untuk mengemas kini paparan apabila data berubah.

Responsif data automatik ini ialah ciri utama Vue.js. Ia menjadikan pembangunan Vue.js lebih mudah, ringkas dan lebih pantas.

Sebagai contoh, kod berikut mencipta objek JavaScript yang mengandungi sifat mesej dan menghantarnya kepada pembina Vue sebagai sifat data:

new Vue({
  data: {
    message: 'Hello world!',
  }
});

Apabila anda menukar sifat mesej, Vue . js akan mengemas kini paparan. Contohnya, kod berikut akan menukar nilai atribut mesej:

vm.message = 'Hello Vue!';

2. Fungsi templat dan render

Vue.js menggunakan templat dan fungsi render untuk mencipta pandangan. Templat ialah beberapa kod HTML yang merangkumi ruang letak, arahan dan ungkapan untuk memaparkan data daripada model data Vue.js. Fungsi render ialah fungsi JavaScript yang menukar data kepada HTML. Vue.js menggabungkan data dan templat untuk mencipta HTML.

Vue.js mempunyai sistem templat yang sangat berkuasa yang membolehkan anda membuat paparan yang kompleks dengan cepat. Berikut ialah templat asas Vue.js:

<div id="app">
  <h1>{{ message }}</h1>
  <input v-model="message">
</div>

Templat ini mengandungi elemen div yang mempunyai atribut id dengan nilai "aplikasi". Ia juga termasuk elemen h1 dan elemen input. Elemen h1 mengandungi ungkapan templat {{ mesej }}, yang digunakan untuk memaparkan nilai atribut mesej dalam model data Vue.js. Elemen input menggunakan arahan model-v untuk mengikat input kepada atribut mesej.

Apabila anda memasukkan teks dalam elemen input, Vue.js akan mengemas kini secara automatik nilai atribut mesej dan mengemas kini nilai baharu kepada elemen h1 dalam templat.

Vue.js juga menyokong fungsi pemaparan, yang merupakan cara yang lebih fleksibel untuk membuat paparan. Fungsi render menerima data sebagai input dan menjana serpihan HTML sebagai output. Berikut ialah fungsi pemaparan Vue.js yang mudah:

new Vue({
  render: function (createElement) {
    return createElement('div', {
      attrs: { id: 'app' }
    }, [
      createElement('h1', this.message),
      createElement('input', {
        domProps: {
          value: this.message
        },
        on: {
          input: (event) => {
            this.message = event.target.value
          }
        }
      })
    ])
  }
})

3. Sifat dan pendengar yang dikira

Sifat pengiraan dan pendengar Vue.js menyediakan cara untuk mengemas kini data apabila ia berubah. Sifat yang dikira ialah sifat yang bergantung pada data lain, manakala pendengar ialah kaedah yang melakukan tindakan apabila data tertentu berubah.

Sifat yang dikira sangat biasa digunakan dalam Vue.js. Ia membenarkan anda merangkum logik data dalam contoh Vue.js dan menyediakan kemas kini responsif. Berikut ialah sifat pengiraan Vue.js yang mudah:

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Contoh ini mencipta tika Vue.js dan mentakrifkan dua sifat menggunakan atribut data: firstName dan lastName. Instance itu juga mencipta sifat terkiraNama penuh menggunakan sifat terkira, yang mengembalikan rentetan gabungan nama pertama danNama terakhir.

Apabila anda menukar sifat firstName atau LastName, harta yang dikira akan dikemas kini secara automatik dan sifat fullName akan dikemas kini, sekali gus mengemas kini data dalam paparan.

Pendengar juga berguna dalam Vue.js. Mereka membenarkan anda melakukan beberapa tindakan selepas perubahan data tertentu. Contohnya, berikut ialah pendengar Vue.js:

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Contoh ini mencipta tika Vue.js dan mentakrifkan tiga sifat menggunakan atribut data: firstName, lastName dan fullName. Contoh itu juga mencipta dua pendengar menggunakan atribut jam tangan, satu untuk sifat firstName dan lastName.

Apabila anda menukar sifat firstName atau lastName, fungsi pendengar yang sepadan akan berjalan secara automatik dan mengemas kini sifat nama penuh dan mengemas kini data dalam paparan.

Kesimpulan

Sistem reaktif Vue.js menjadikan pembangunan aplikasi responsif lebih mudah dan ringkas. Dalam Vue.js, data dan paparan dipisahkan sepenuhnya, yang memudahkan anda menambahkan fungsi baharu pada aplikasi anda. Ciri seperti kereaktifan data Vue.js, templat dan fungsi pemaparan, sifat dikira dan pendengar menjadikan Vue.js sesuai untuk membina aplikasi yang berkesan dan cekap.

Atas ialah kandungan terperinci Menyelam mendalam ke dalam proses reaktif dengan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!