Mari kita bincangkan tentang peristiwa pencetus perubahan nilai vue

Dalam Vue, dipacu data ialah idea teras, jadi apabila kami mengubah suai data komponen, kami perlu mengemas kini paparan tepat pada masanya untuk mencapai kesan paparan dinamik halaman hujung hadapan. Vue menyediakan mekanisme yang sangat mudah untuk mencetuskan peristiwa yang sepadan secara automatik apabila data berubah, yang biasanya dipanggil pendengar.

Di sini, kami akan memperkenalkan mata pengetahuan yang berkaitan tentang peristiwa yang dicetuskan apabila nilai dalam Vue berubah, untuk membantu pembaca lebih memahami dan menggunakan fungsi berkaitan Vue.

1. Cara untuk memantau perubahan data

Vue menyediakan pelbagai cara untuk memantau perubahan data, termasuk pengiraan, jam tangan, kaedah, dsb. Di bawah ini kami akan memperkenalkan penggunaan dan ciri-ciri kaedah ini masing-masing.

1.1 dikira

dikira ialah atribut yang sangat penting dalam Vue Selepas mentakrifkan atribut yang dikira dalam komponen, Vue secara automatik akan mengira nilai atribut apabila komponen itu dipaparkan, dan akan berlaku. apabila nilai atribut Mengemas kini paparan secara automatik apabila ia berubah.

Berikut ialah contoh yang dikira:

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

Dalam contoh ini, apabila nilai FirstName atau LastName berubah, Vue akan mengira semula nilai fullName dan mengemas kini paparan yang sepadan .

Jam tangan 1.2

jam tangan ialah cara lain untuk memantau perubahan data Ia digunakan terutamanya untuk memantau perubahan dalam nilai tertentu dan melaksanakan logik tertentu apabila ia berubah. Berbeza daripada yang dikira, jam tangan perlu ditakrifkan secara berasingan, seperti yang ditunjukkan di bawah:

watch: {
  firstName: function (newValue, oldValue) {
    console.log('firstName changed from ' + oldValue + ' to ' + newValue)
  }
}

Dalam contoh ini, apabila nilai FirstName berubah, Vue secara automatik akan melaksanakan logik yang ditakrifkan dalam jam tangan dan mengeluarkan maklumat log yang sepadan .

kaedah 1.3

kaedah ialah atribut yang digunakan untuk mentakrifkan kaedah pengendalian komponen Apabila memanggil kaedah, anda boleh mengubah suai data komponen secara langsung dan mencetuskan kemas kini paparan yang sepadan. Walaupun kaedah ini kurang praktikal, ia juga sangat mudah dalam beberapa senario khas.

Berikut ialah contoh atribut kaedah:

methods: {
  changeName: function () {
    this.firstName = 'NewName'
  }
}

Dalam contoh ini, apabila kaedah changeName dipanggil, Vue akan mengubah suai nilai firstName secara automatik dan mencetuskan kemas kini paparan.

2. Senario aplikasi peristiwa yang dicetuskan oleh perubahan nilai

Dalam pembangunan sebenar, kita sering perlu mencetuskan beberapa peristiwa yang sepadan apabila data berubah untuk mencapai keperluan perniagaan, seperti real- masa cari tunggu. Di bawah ini kami akan menggabungkan senario khusus untuk memperkenalkan cara menggunakan kaedah memantau perubahan data yang diperkenalkan dalam artikel sebelumnya untuk melaksanakan peristiwa pencetus perubahan nilai.

2.1 Carian masa nyata

Dalam pembangunan sebenar, kita biasanya perlu melaksanakan fungsi carian masa nyata dalam kotak input. Katakan kita mempunyai halaman senarai pengguna dan perlu mencari senarai pengguna yang sepadan dalam masa nyata selepas pengguna memasukkan kata kunci. Berikut ialah contoh kod untuk melaksanakan carian masa nyata berdasarkan jam tangan:

<template>
  <div>
    <input type="text" v-model="keyword" />
    <ul>
      <li v-for="user in filteredUsers">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        keyword: '',
        users: [
          {name: 'Tom'},
          {name: 'Jerry'},
          {name: 'Alice'},
          {name: 'Bob'}
        ]
      }
    },
    computed: {
      filteredUsers: function () {
        return this.users.filter(user => user.name.indexOf(this.keyword) !== -1)
      }
    },
  }
</script>

Dalam contoh ini, kami menggunakan jam tangan untuk memantau perubahan dalam atribut kata kunci dan mengira semula atribut FilteredUsers apabila ia berubah, dengan itu mencapai Carian masa nyata. Kaedah ini boleh digunakan dengan sangat mudah untuk pembangunan bahagian hadapan sebenar.

2.2 Pengesahan Borang

Apabila membangunkan halaman borang, kami selalunya perlu mengesahkan input kandungan oleh pengguna dan memberikan maklumat segera yang sepadan. Berikut ialah contoh kod yang melaksanakan pengesahan borang berdasarkan pengiraan:

<template>
  <div>
    <input type="text" v-model="username" />
    <div v-if="isValidUsername">{{username}} is valid</div>
    <div v-else>{{username}} is invalid</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: ''
      }
    },
    computed: {
      isValidUsername: function () {
        return this.username.length >= 6
      }
    },
  }
</script>

Dalam contoh ini, kami mengira nilai atribut isValidUsername melalui pengiraan dan mengemas kini paparan yang sepadan apabila nilai berubah. Kaedah ini boleh melaksanakan pengesahan borang melalui kod mudah dan memberikan pengguna maklumat segera yang mesra.

3. Ringkasan

Mencetuskan peristiwa apabila nilai berubah merupakan salah satu ciri yang sangat penting bagi rangka kerja Vue Dengan memantau perubahan data, kami boleh mencapai paparan dinamik dengan mudah muka hadapan dan berinteraksi. Dalam aplikasi praktikal, kita perlu memilih kaedah pemantauan yang sesuai mengikut senario tertentu, dan mengoptimumkan pelaksanaan kod berdasarkan ciri-ciri komponen. Pada masa yang sama, kita juga perlu memberi perhatian kepada kesan prestasi pendengar untuk mengelakkan masalah prestasi yang disebabkan oleh penggunaan pendengar yang berlebihan.

Atas ialah kandungan terperinci Mari kita bincangkan tentang peristiwa pencetus perubahan nilai vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!