Analisis ringkas tentang perbezaan antara operasi Ref Dom dalam Vue2.x dan Vue3.x

Mengapa mudah digunakan dan cekap untuk mengendalikan Dom dengan Ref? Artikel berikut akan bercakap tentang operasi Ref, memperkenalkan intipati Ref mendapatkan Dom, perbezaannya antara Vue2.x dan Vue3.x, dll. Saya harap ia akan membantu semua orang!

Sebelum membangunkan projek, kami sering melakukan analisis keperluan terlebih dahulu Untuk bahagian hadapan, kami boleh menyelidik atau memilih perpustakaan komponen asas untuk meningkatkan kecekapan Kerja kami. Lagipun, syarikat yang mengambil berat tentang kos masa tidak akan memberi anda masa untuk menonton siri TV dan bermain permainan untuk membangunkan komponen seperti kalendar. Walau bagaimanapun, tidak semua perpustakaan komponen di pasaran dapat memenuhi keperluan kami. Pada masa ini, kita perlu menulis sendiri komponen untuk menggunakannya pada projek.

Dan inilah yang saya ingin katakan: Bagaimana untuk mereka bentuk komponen supaya ia mudah digunakan (atau mengurangkan jumlah kod), sambil juga meningkatkan kebolehskalaan dan memudahkan perubahan permintaan dan penyelenggaraan seterusnya?

Terdapat banyak cara, dan menggunakan Ref untuk mengendalikan Dom adalah salah satu daripadanya, tetapi kaedah ini membolehkan kami mengekalkan dan mengendalikan Modal, Popup dan kerap mengendalikan paparan Dom dan Apabila menyembunyikan interaktif komponen, ia memainkan kelebihan yang besar. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Mata pengetahuan yang berkaitan dan contoh aplikasi Ref mengendalikan Dom dibahagikan kepada beberapa aspek. Mari kita buat analisis

• Ref mendapat intipati Dom
• Perbezaan antara operasi Ref Dom dalam Vue2.x dan Vue3.x
• Komponen operasi Ref Dom dan komponen ibu bapa-anak tunggal Perbandingan pemindahan

Butiran

Ref mendapat intipati Dom

Vue objek dalam Vue2.x Atribut $refs sebenarnya adalah koleksi semua rujukan berdaftar, dan ref sepadan dengan ref="xx" yang dikaitkan dengan komponen berbeza atau elemen Dom biasa dalam templat cara sebenar untuk mendapatkan rujukan dalam kod sumber juga melalui kaedah asli getElementById Dan nod Dom yang diperolehi boleh dikatakan bahawa ref ialah gula sintaksis document.getElementById. Ref vue3 meneruskan penggunaan vue2, dan juga menambah fungsi mencipta data responsif

Sesetengah orang mungkin bertanya, kerana kedua-dua ref dan getElementById boleh mendapatkan Dom, kemudian dalam projek Semasa pembangunan, adakah tiada perbezaan kaedah yang saya pilih?

Berkenaan isu ini, data menunjukkan bahawa $refs akan mengurangkan penggunaan mendapatkan nod DOM berbanding kaedah document.getElementById akan dibincangkan secara terperinci dalam artikel seterusnya.

Perbezaan antara operasi Ref Dom dalam Vue2.x dan Vue3.x

Vue2.x

Kami hanya perlu menambah atribut ref="xx" pada elemen atau komponen Dom yang sepadan, dan kemudian gunakan ini.$refs.xx dalam objek Vue untuk mendapatkan Dom secara langsung dan mengendalikan atribut kaedahnya,

<user-and-dep-tree-select-modal
  ref="avaUserTreeSelect"
  title="選擇可見範圍"
  :project-id="currentProjectId"
  :visible.sync="avaUserModalVisible"
  @ok="editAvailableUser"
/>
或者
<div class="user" ref="user">dd</div>

// $refs
showManagerModal () {
  this.$refs.avaUserTreeSelect.showModal(this.form.managers)
  console.log(this.$refs.user.text)
},

Vue3.2

Kaedah yang digunakan dalam versi Vue3.2

//普通Dom
<div class="user" ref="user"></div>
//组件
<batch-adjust-department-modal ref="batchAdjustDepartmentRef" />

<script setup>
import { ref } from &#39;vue&#39;;
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);
</script>

Mungkin seseorang di sini ada soalan, mengapa Mengisytiharkan pembolehubah malar dengan nama yang sama seperti ref templat mengikat DOM yang sepadan? Penjelasan lanjut di sini:

• Sokongan Vue3 untuk api komposisi dalam versi terdahulu (sebelum 3.0.0-beta.21) hanya boleh digunakan dalam fungsi pilihan komponen setup. Pembolehubah yang sepadan semuanya dikembalikan dalam kaedah persediaan() {tulis pembolehubah atau kaedah yang perlu digunakan dalam templat}

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

export default defineComponent({
  name: &#39;HelloWorld&#39;,
  setup(props, ctx) {
    const count = ref(0)
    function add() {
      count.value++
    }
    // 使用return {} 把变量、方法暴露给模板
    return {
      count,
      add,
    }
  },
})
</script>

• dalam 3.0.0-beta ciri percubaan <script setup> telah ditambahkan dalam versi 21. Jika digunakan, ia akan menggesa bahawa <script setup> masih dalam peringkat ciri percubaan.
• mengalih keluar status percubaan <script setup> dalam versi 3.2.0 Sejak itu, telah diumumkan bahawa <script setup> telah digunakan secara rasmi dan menjadi salah satu ciri stabil rangka kerja. Berbanding dengan pilihan komponen setup fungsi, <script setup> kita hanya perlu menulis kod yang kurang dan lebih ringkas, tidak perlu menggunakan return {} untuk mendedahkan pembolehubah dan kaedah, dan tidak perlu mendaftar secara aktif apabila menggunakan komponen, ia akan terikat secara automatik untuk anda Tentukan

jadi pembolehubah yang diisytiharkan dalam <script setup> akan ditambahkan secara automatik pada objek Vue ini, seperti

<script setup>	<script>
const user = ref(null);	this.$ref.user

Ref操作组件Dom和父子组件单向传递

props父传子，子通过emits传父，这样单方向传递，在控制弹层组件的显示和隐藏方面也可以实现，但是如此一来，我们就会像下面一样 父组件

<template>
  <exchange-valid-modal-vue v-model:visible="visibleExchange" />
</template>
<script setup>
// 转让管理员组件
import ExchangeValidModalVue from &#39;./modal/ExchangeValidModal.vue&#39;;
// modal弹层
const visibleExchange = ref(false); // 转让管理员可视化
const onExchangeAdmin = () => {
  visibleExchange.value = true;
};
</script>

子组件ExchangeValidModalVue.vue

<template>
    <t-dialog
      v-model:visible="visibleExchange"
      header="转让主管理员"
      attach="body"
      width="384px"
      :confirm-on-enter="true"
      :on-close="onCloseExchange"
    />
</template>
<script setup>
const visibleExchange = ref(false);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.visible,
  (cur, pre) => {
    visibleExchange.value = cur;
    if (cur) {
      firstTag.value = 1;
    }
  },
);
watch(
  () => visibleExchange.value,
  (cur, pre) => {
    emits(&#39;update:visible&#39;, cur);
  },
);
</script>

从代码里面我们就可以发现通过用父子组件单向传递的方式去实现一个组件的显示和隐藏功能，我们需要如此费劲地声明多个变量，还要做两次监听，万一后面不止一个这样的参数进行传递，那么代码量可想而知，而且也不易维护。

其实显示和隐藏的功能可以直接在内部中进行值的响应即可，并不需要在父级别中操作，如下将上面代码改变一下：

子组件ExchangeValidModalVue.vue

<template>
    <t-dialog
      v-model:visible="visible"
      header="转让主管理员"
      attach="body"
      width="384px"
      :confirm-on-enter="true"
      :on-close="onCloseExchange"
    />
</template>
<script setup>
import { ref } from &#39;vue&#39;;
const visible = ref(false);
const emits = defineEmits([&#39;call&#39;]);
const onEmitSelectSuperiod = () => { // 省略
  emits(&#39;call&#39;);
}；
const onOpen = () => {
  visible.value = true;
};
const onClose = () => {
  visible.value = false;
};

defineExpose({
  onOpen,
  onClose,
});
</script>

那么在父组件中，我们只需要通过ref得到该组件Dom，然后操作Dom内部的方法即可；

如：父组件改写

<template>
  <exchange-valid-modal-vue ref="exchangeRef" />
</template>
<script setup>
// 转让管理员组件
import ExchangeValidModalVue from &#39;./modal/ExchangeValidModal.vue&#39;;
// modal弹层
const exchangeRef = ref(null); // 转让管理员可视化
const onExchangeOpen = () => {
   exchangeRef.onOpen() // 直接操作dom里defineExpose暴露出来的方法
};
</script>

如此，是不是比父子单向数据传递的方式更加高效易用？当然上面所说的只是我举的一个例子，当后续需要在组件内扩展功能也可按类似的方法代替单向数据流的方式扩展

但，请注意；这种操作dom方式，并不是什么场景下都是最佳的选择；我们可以分情况选择，比如当一些数据只需要在子组件的范畴中实现，而不需要父组件外加干涉的情况下，选择ref操作dom更为高效；

补充知识点：

defineExpose

在 Vue3.2 中，默认不会暴露任何在 <script setup> 中声明的绑定，即不能通过模板 ref 获取到组件实例声明的绑定。

Vue3.2 提供了 defineExpose 编译器宏，可以显式地暴露需要暴露的组件中声明的变量和方法

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Analisis ringkas tentang perbezaan antara operasi Ref Dom dalam Vue2.x dan Vue3.x. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!