Rumah hujung hadapan web View.js Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue

Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue

Jun 11, 2023 am 11:28 AM
Data responsif vueset

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>
Salin selepas log masuk

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()
}
Salin selepas log masuk

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
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set Jul 24, 2023 pm 07:22 PM

Kaedah dan contoh menggunakan fungsi Vue.set untuk menambahkan sifat secara dinamik Dalam Vue, jika kita ingin menambah sifat secara dinamik pada objek sedia ada, kita biasanya menggunakan fungsi Vue.set. Fungsi Vue.set ialah kaedah global yang disediakan oleh Vue.js, yang boleh memastikan kemas kini responsif apabila menambah sifat. Artikel ini akan memperkenalkan penggunaan Vue.set dan memberikan contoh khusus. Pertama sekali, dalam Vue, kami biasanya menggunakan pilihan data untuk mengisytiharkan data responsif.

Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam data responsif Cara menggunakan jam tangan dalam Vue untuk memantau perubahan dalam data responsif Jun 11, 2023 am 09:27 AM

Dengan pembangunan rangka kerja bahagian hadapan yang berterusan, Vue telah menjadi salah satu rangka kerja bahagian hadapan yang suka diterima pakai oleh banyak syarikat, dan ia agak mudah. Dalam proses menggunakan Vue untuk membangunkan aplikasi, data responsif adalah ciri yang sering kami gunakan. Dalam kawalan perubahan data responsif, jam tangan ialah ciri yang sangat berguna yang disediakan oleh Vue. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara menggunakan jam tangan untuk memantau perubahan dalam data responsif dalam Vue, serta beberapa langkah berjaga-jaga. Apa itu Watchwatch ialah sejenis Vue

Panduan Pemula untuk VUE3: Data Responsif dan Sifat Dikira Panduan Pemula untuk VUE3: Data Responsif dan Sifat Dikira Jun 16, 2023 am 11:31 AM

Dalam rangka kerja hadapan moden, data reaktif dan sifat yang dikira adalah konsep yang sangat penting. Sebagai pemula Vue3, selepas mempelajari kedua-dua konsep ini, anda boleh lebih memahami ciri dan penggunaan rangka kerja Vue. Artikel ini akan menumpukan pada menerangkan data responsif Vue3 dan sifat pengiraan, termasuk konsep asas, penggunaan dan contohnya. Jika anda belum biasa dengan Vue3, sila pelajari asas Vue3 terlebih dahulu. 1. Apakah data responsif? Dalam Vue3, data responsif ialah kaedah yang boleh menjejaki perubahan secara automatik dan mengemas kini halaman dengan serta-merta.

Penjelasan terperinci tentang fungsi Vue.set dan cara menambah sifat responsif secara dinamik Penjelasan terperinci tentang fungsi Vue.set dan cara menambah sifat responsif secara dinamik Jul 24, 2023 pm 11:58 PM

Penjelasan terperinci tentang fungsi Vue.set dan cara menambah atribut responsif secara dinamik Vue.js ialah rangka kerja JavaScript popular yang menyediakan cara yang mudah, cekap dan fleksibel untuk membina antara muka pengguna. Dalam Vue.js, kami boleh menggunakan atribut responsif untuk melaksanakan pengikatan dua hala data, supaya perubahan dalam data boleh dicerminkan secara automatik pada antara muka. Walau bagaimanapun, kadangkala kita perlu menambah sifat responsif secara dinamik, kemudian kita perlu menggunakan fungsi Vue.set. Fungsi Vue.set ialah fungsi yang disediakan oleh Vue.js

Cara menggunakan watchEffect dalam Vue untuk memantau data responsif dan mengemas kini DOM Cara menggunakan watchEffect dalam Vue untuk memantau data responsif dan mengemas kini DOM Jun 11, 2023 pm 02:55 PM

Sebagai rangka kerja bahagian hadapan, salah satu teras Vue ialah paparan dipacu data. Apabila data yang ditakrifkan dalam Vue berubah, paparan yang sepadan juga dikemas kini. Dalam Vue3, untuk mengoptimumkan prestasi dan kelajuan tindak balas, sistem kereaktifan dan CompositionAPI diperkenalkan. Sebagai sebahagian daripada sistem responsif, watchEffect boleh memantau perubahan data dan mengemas kini DOM serta-merta. Artikel ini akan memperkenalkan secara terperinci cara menggunakan watchEffect untuk memantau responsif dalam Vue.

Prinsip data responsif Vue dan perbezaan antara Vue.set dan Vue.$set Prinsip data responsif Vue dan perbezaan antara Vue.set dan Vue.$set Jun 09, 2023 pm 04:10 PM

Vue ialah rangka kerja pembangunan popular dalam medan bahagian hadapan semasa Salah satu mekanisme terasnya yang boleh mencetuskan kemas kini paparan melalui pengubahsuaian data ialah data responsif. Artikel ini akan menyelidiki prinsip data reaktif Vue dan meneroka perbezaan antara Vue.set dan Vue.$set. 1. Prinsip data responsif Vue Vue akan merampas sumber data terlebih dahulu Untuk mentakrifkan sumber data, ia hanya perlu memenuhi tiga syarat berikut: objek tidak kosong, objek bukan objek Beku atau Tertutup, dan objek adalah. bukan contoh Vue itu sendiri. Di tempat yang sepatutnya

Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue Cara menggunakan Vue.set untuk melaksanakan data responsif dalam Vue Jun 11, 2023 am 11:28 AM

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 sifat pada objek responsif dan memastikan sifat baharu itu responsif. Dalam Vue, kami biasanya menggunakan objek dan tatasusunan sebagai sumber data untuk komponen sumber data ini biasanya diperhatikan.

Penjelasan terperinci tentang fungsi Vue.observable dan aplikasinya dalam data responsif Penjelasan terperinci tentang fungsi Vue.observable dan aplikasinya dalam data responsif Jul 26, 2023 am 08:53 AM

Penjelasan terperinci tentang fungsi Vue.observable dan aplikasinya dalam data responsif Vue ialah rangka kerja JavaScript popular yang menyediakan cara ringkas dan mudah digunakan untuk mencipta aplikasi web responsif. Salah satu ciri teras Vue ialah keupayaan untuk mengemas kini paparan secara automatik dengan memerhatikan perubahan dalam objek Ia menyokong fungsi seperti pengikatan data dua hala dan sifat yang dikira. Dalam Vue, kita boleh menggunakan fungsi Vue.observable untuk mencipta objek data yang boleh diperhatikan dan memaparkannya dalam paparan dalam masa nyata

See all articles