Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue

Vue menyediakan cara yang sangat mudah untuk mengemas kini data responsif, iaitu menggunakan kaedah Vue.set. Artikel ini akan memperkenalkan cara menggunakan kaedah Vue.set dan mata pengetahuan berkaitannya.

1. Pengenalan kepada kaedah Vue.set

Kaedah Vue.set ialah API global yang disediakan oleh Vue, yang digunakan untuk menambah harta pada objek responsif dan memastikan sifat baharu itu adalah responsif terhadap. Dalam Vue, kami biasanya menggunakan objek dan tatasusunan sebagai sumber data untuk komponen Sumber data ini biasanya diperhatikan dan menyokong pemantauan oleh sistem responsif Vue. Walau bagaimanapun, dalam beberapa kes, kita perlu menambah atribut atau elemen baharu pada objek atau tatasusunan Pada masa ini, jika kaedah Vue.set tidak digunakan, atribut atau elemen baharu yang ditambahkan tidak akan dipantau oleh sistem responsif, mengakibatkan. dalam Beberapa soalan.

2. Penggunaan kaedah Vue.set

Kaedah Vue.set ialah API global, jadi kami boleh menggunakannya secara langsung dalam komponen. Berikut ialah cara memanggil kaedah Vue.set:

Vue.set(obj, kunci, nilai)

Antaranya, obj mewakili objek yang akan dikendalikan, kunci mewakili nama atribut untuk ditambah, dan nilai Menunjukkan nilai atribut yang akan ditambah.

Kami boleh menunjukkan penggunaan Vue.set melalui kod berikut:

<template>
  <div>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
    <button @click="addData">添加数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    addData() {
      Vue.set(this.userInfo, 'phone', '123456789') // 添加响应式属性
    }
  }
}
</script>

Dalam kod di atas, kami menambah telefon atribut baharu dalam objek userInfo dan menggunakan Vue.set Cara untuk membuat pasti ia responsif. Apabila kami mengklik butang, atribut bernama telefon dengan nilai '123456789' akan ditambahkan pada objek userInfo Kami boleh melihat hasilnya dalam templat. Pada masa ini, operasi tambah menggunakan Vue.set bukan sahaja boleh mendapatkan respons dalam kemas kini berikutnya, ia juga boleh mencetuskan sebarang kemas kini mengikat data untuk objek.

3. Analisis prinsip Vue.set

Prinsip pelaksanaan Vue.set tidak rumit dan dilaksanakan terutamanya dengan memanggil sistem responsif Vue. Untuk operasi penambahan objek, pelaksanaan Vue.set adalah seperti berikut:

Vue.set = function (obj, key, value) {
  // 判断obj是否是响应式的对象
  if (hasOwn(obj, key)) {
    obj[key] = value
    return
  }
  // 获取当前的观察者
  const ob = obj.__ob__
  // 非响应式对象，直接赋值
  if (!ob) {
    obj[key] = value
    return
  }
  // 将新增属性的值变为响应式的
  defineReactive(ob.value, key, value)
  ob.dep.notify()
}

Pertama, kaedah Vue.set akan menentukan sama ada obj ialah objek responsif melalui kaedah hasOwn Vue Jika ya, tetapkan nilai kepada objek secara langsung. Jika tidak, ia akan mendapat ob pemerhati obj, kemudian panggil kaedah defineReactive untuk menjadikan sifat baharu itu responsif, dan panggil kaedah ob.dep.notify untuk memberitahu komponen untuk dikemas kini.

Untuk operasi penambahan tatasusunan, pelaksanaan Vue.set adalah seperti berikut:

Vue.set = function (target, key, val) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (hasOwn(target, key)) {
    target[key] = val
    return val
  }
  const ob = target.__ob__
  if (!ob) {
    target[key] = val
    return val
  }
  ob.convert(key, val)
  ob.dep.notify()
  return val
}

Kita dapat melihat bahawa untuk operasi penambahan tatasusunan, Vue.set dilaksanakan terutamanya menggunakan kaedah sambatan. Pada masa yang sama, untuk operasi tatasusunan, kami juga boleh menggunakan Vue.set untuk memastikan elemen tambahan adalah responsif.

4. Ringkasan

Artikel ini terutamanya memperkenalkan prinsip penggunaan dan pelaksanaan kaedah Vue.set ialah cara yang sangat mudah yang disediakan oleh Vue untuk melaksanakan pembaharuan data . Sama ada menambah elemen pada objek atau tatasusunan, kami boleh menggunakan kaedah Vue.set untuk memastikan elemen baharu ini responsif, dengan itu menyelesaikan beberapa masalah kemas kini data responsif.

Atas ialah kandungan terperinci Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!