vue melarang pautan data

Vue ialah rangka kerja JavaScript popular yang tujuan utamanya adalah untuk menjadikan pembangunan bahagian hadapan lebih mudah dan pantas. Salah satu konsep yang paling biasa digunakan dalam rangka kerja Vue ialah pautan data, yang menjadikan data dalam aplikasi sangat sensitif dan dinamik kepada gelagat pengguna.

Walau bagaimanapun, kadangkala, pembangun mungkin mahu melumpuhkan pautan data dan hanya membenarkan data tertentu berubah dalam keadaan tertentu. Situasi yang paling biasa ialah sekatan dan penapisan data.

Artikel ini akan memperkenalkan cara untuk melumpuhkan pautan data dalam Vue dan hanya berharap untuk menyokong pautan data dalam keadaan khusus tertentu.

1. Apakah pautan data

Dalam Vue, pautan data bermakna apabila satu data berubah, semua data yang berkaitan dengannya juga akan dikemas kini. Mekanisme kaitan ini boleh dicapai melalui sistem responsif Vue.

Sistem reaktif Vue bermaksud bahawa apabila kita menghantar objek kepada tika Vue sebagai data, Vue akan menambah sifatnya sendiri pada objek untuk menjejaki perubahan sifat dalam objek. Apabila sifat ini ditetapkan kepada nilai baharu, Vue akan memberitahu komponen untuk memaparkan semula templat.

Sebagai contoh, katakan kita mempunyai objek dalam contoh Vue:

data: {
  user: {
    name: 'John Doe',
    age: 30
  }
}

Apabila kami mengemas kini nilai user.age melalui kod, Vue akan mengemas kini secara automatik dua tempat berikut dalam komponen:

1. Tempat untuk memaparkan sifat ini;
2. Sebarang sifat kalkulator yang bergantung pada harta ini.

Ini ialah pautan data. Apabila user.age berubah, bukan sahaja sifat itu sendiri berubah, tetapi sifat lain dan sifat kalkulator yang terlibat di dalamnya dikemas kini.

2. Senario di mana pautan data dilarang

Walaupun pautan data boleh membawa kemudahan yang besar, kadangkala ia mungkin membebankan kita. Dalam sesetengah kes, melumpuhkan pautan data mungkin lebih sesuai, seperti:

1 Penapisan data

Apabila kami perlu menapis beberapa kandungan dalam data, melumpuhkan pautan data mungkin diperlukan. Sebagai contoh, kita mungkin hanya mahu memasukkan nombor dalam kotak input dan tidak menerima aksara bukan angka. Dalam contoh ini, menetapkan model v kotak input akan menyebabkan semua input menjadi rentetan, yang tidak memenuhi keperluan kami. Kami perlu menukarnya dan kemudian memprosesnya melalui kod JavaScript.

2. Hadkan data daripada memasuki keadaan tertentu

Kadangkala kami mahu data hanya dibenarkan berubah dalam keadaan tertentu. Sebagai contoh, tarikh lahir pengguna hanya boleh dikemas kini apabila dia berumur 18 tahun. Di sini, kami perlu melumpuhkan pautan data untuk memastikan data hanya akan berubah apabila syarat dipenuhi.

3. Peraturan logik perniagaan

Dalam sesetengah kes, kami perlu memproses dan mengemas kini data mengikut peraturan logik perniagaan tertentu. Ini mungkin melibatkan pengiraan berbilang atribut, pengesahan data dan beberapa senario khusus lain. Dalam kes ini, melumpuhkan pautan data adalah perlu untuk memastikan pemprosesan dan pengemaskinian data yang lebih lengkap dan tepat.

Kini kami tahu sebab kami perlu melumpuhkan pautan data. Seterusnya, mari lihat cara melakukan ini dalam Vue.

3. Pelaksanaan teknikal melumpuhkan pautan data

Teknologi untuk melumpuhkan pautan data dalam Vue adalah sangat mudah. Hanya gunakan kaedah $set dan $watch yang disediakan oleh Vue sendiri.

1 Gunakan kaedah $set

Kaedah $set Vue membolehkan kami menambahkan sifat pada objek sedia ada secara dinamik. Kaedah ini memintas sistem reaktif dalam Vue, membolehkan kami mengawal perubahan pada sifat tanpa menyebabkan perubahan pada sifat berkaitan yang lain.

Dalam contoh kod berikut, kami mempunyai contoh Vue dengan sifat objek bernama user. Kami mahu menetapkan sifat umur dalam objek pengguna kepada nilai baharu dan kami tidak mahu perubahan ini menyebabkan data berkaitan bertindak balas. Melaksanakan kaedah ini adalah mudah:

# 禁止数据联动的代码

export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  },
  methods: {
    updateAge(value) {
      // 使用 $set 方法更新 user 对象的 age 属性
      this.$set(this.user, 'age', value)
    }
  }
}

Dengan cara ini, apabila kita memanggil kaedah updateAge, kita boleh mengawal perubahan pada user.age.

2 Gunakan kaedah $watch

Kaedah $watch Vue boleh melihat perubahan dalam sifat dalam komponen dan memanggil fungsi sebagai tindak balas. Dengan menggunakan kaedah ini, kita boleh mengawal perubahan atribut dan mengelakkan pautan data daripada berlaku.

Dalam contoh kod berikut, kami mempunyai contoh Vue dengan sifat objek bernama user. Kami mahu dapat menukar nilai atribut umur dalam objek pengguna hanya dalam keadaan tertentu. Untuk melaksanakan kaedah ini, kita perlu menggunakan kaedah $watch untuk memantau user.age. Apabila hartanah dikemas kini, kami menyemak sama ada syarat itu dipenuhi. Jika ia tidak sepadan, kita hanya perlu menukar harta itu kembali kepada nilai sebelumnya.

# 使用 $watch 方法阻止数据联动

export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  },
  watch: {
    'user.age'(newValue, oldValue) {
      if (newValue < 18) {
        // 如果新值不合法，则将属性设置回旧值
        this.user.age = oldValue
      }
    }
  },
  methods: {
    updateAge(value) {
      this.user.age = value
    }
  }
}

Dengan cara ini, apabila updateAge dipanggil, kaedah $watch akan menentukan sama ada perubahan atribut itu sah mengikut peraturan yang ditetapkan. Jika perubahan memenuhi keperluan, nilai baharu ditetapkan ke dalam objek pengguna. Jika keperluan tidak dipenuhi, kaedah $watch mengembalikan nilai sifat yang diubah kepada nilai sebelumnya.

Ringkasan

Melumpuhkan pautan data sangat diperlukan dalam senario tertentu dan boleh membantu kami mengelakkan beberapa masalah yang tidak dijangka dengan berkesan. Terdapat banyak cara untuk melumpuhkan pautan data dalam Vue Artikel ini terutamanya memperkenalkan penggunaan kaedah $set dan $watch, yang merupakan teknologi pelaksanaan paling popular dalam Vue. Apabila anda perlu melaksanakan sekatan data dan operasi penapisan yang serupa dalam Vue, anda boleh menggunakan kaedah ini dengan mudah untuk mengawal perubahan data dan mengelakkan pautan data daripada berlaku.

Atas ialah kandungan terperinci vue melarang pautan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!