Cara menggunakan ref dan reaktif dalam vue3

1 ref

ref ialah fungsi dalam Vue3, yang boleh menukar pembolehubah biasa kepada Pembolehubah reaktif. Apabila menggunakan ref, kita perlu menghantar nilai awal dan ref akan mengembalikan objek yang mengandungi nilai awal ini.

Sintaks untuk menggunakan ref adalah seperti berikut:

import { ref } from 'vue';
const count = ref(0);

Dalam kod di atas, kami telah mencipta pembolehubah bernama count dengan nilai awal 0. Dengan memanggil fungsi ref, kami menukar pembolehubah count kepada objek ref. Apabila menggunakan count dalam komponen, kita perlu mengakses nilainya melalui .value dan ref.value = boleh mengubah suai nilainya. Tetapi apabila ref diakses sebagai sifat peringkat teratas dalam templat, ia secara automatik "dibuka", jadi tidak perlu menggunakan .value. ：

------------------

Nota: Anda tidak perlu menambah .value apabila menggunakannya dalam teg Anda mesti menambah .value

semasa menggunakannya dalam fungsi > juga boleh digunakan untuk memantau perubahan Elemen: ref

<template>
  <div ref="myDiv">这是一个 DOM 元素</div>
</template>

<script>
  import { ref, onMounted } from &#39;vue&#39;;

  export default {
    setup() {
      const myDiv = ref(null);

      onMounted(() => {
        console.log(myDiv.value.innerHTML);
      });

      return {
        myDiv,
      };
    },
  };
</script>

Dalam kod di atas, kami mencipta objek

bernama myDiv dan menetapkannya kepada elemen ref. Dalam fungsi div komponen, kami menggunakan fungsi cangkuk setup Selepas komponen dipaparkan, onMounted elemen myDiv dicetak. innerHTML

2. reaktif

ialah API lain dalam Vue3, yang boleh menukar reactiveobjek biasa menjadi objek responsif. Tidak seperti , ref mengembalikan objek reaktif dan bukannya objek yang mengandungi nilai. Kita boleh mendapatkan atau mengubah suai nilai objek reaktif dengan mengakses sifatnya. reactive

Sintaks untuk menggunakan reaktif adalah seperti berikut:

import { reactive } from 'vue';
const state = reactive({
  count: 0,
});

Dalam kod di atas, kami mencipta objek reaktif bernama

, yang mengandungi objek bernama atribut state, nilai awal ialah 0. count

Apabila menggunakan

dalam komponen, kita boleh mengakses sifatnya sama seperti objek biasa: state

<template>
  <div>{{ state.count }}</div>
</template>

Selain mengakses sifat,

juga boleh mengakses sifat biasa objek. Untuk pemprosesan responsif objek atau tatasusunan JavaScript, anda boleh menggunakan reactive untuk menukar objek biasa kepada objek responsif, dengan itu mencapai penjejakan responsif keseluruhan objek, contohnya: reactive

const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3

reaktif Anda juga boleh gunakan objek bersarang Cipta objek responsif dalam dan tatasusunan, contohnya:

const obj = { 
  a: 1, 
  b: { c: 2 }，
  d: [1, 2, 3]
};
const reactiveObj = reactive(obj);

// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);

reaktif juga menyokong penggunaan toRefs dalam objek bersarang untuk menukar sifat objek responsif kepada rujukan responsif untuk kegunaan mudah dalam templat. Contohnya:

const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);

// 模板中使用
<template>
  <div>{{ b.c }}</div>
</template>

Ringkasnya,

selain daripada mengakses sifat juga boleh mengendalikan penjejakan responsif bagi keseluruhan objek atau tatasusunan, dan menyokong penggunaan reactive dalam objek bersarang untuk kegunaan mudah dalam templat. toRefs

3. Perbandingan penggunaan ref dan reaktif

1 Cara menggunakan ref

Pembolehubah yang dicipta boleh mendapatkan dan mengubahsuai nilainya melalui ref . Contohnya: .value

import { ref } from 'vue'

// 创建ref
const count = ref(0)

// 获取ref的值
console.log(count.value) // 输出 0

// 修改ref的值
count.value = 1
console.log(count.value) // 输出 1

2. Cara menggunakan reaktif

Objek yang dicipta perlu mendapatkan dan mengubah suai nilai atributnya melalui tugasan penstrukturan. Contohnya: reactive

import { reactive } from 'vue'

// 创建reactive对象
const obj = reactive({
  count: 0
})

// 获取reactive对象的属性值
console.log(obj.count) // 输出 0

// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1

Atas ialah kandungan terperinci Cara menggunakan ref dan reaktif dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!