Eine kurze Analyse des Unterschieds zwischen der Ref-Operation Dom in Vue2.x und Vue3.x

Warum ist Ref Operating Dom so einfach zu bedienen und effizient? Der folgende Artikel befasst sich mit der Ref-Operation, stellt die Essenz des Ref-Erhaltens von Dom, den Unterschied zwischen Vue2.x und Vue3.x usw. vor. Ich hoffe, er wird für alle hilfreich sein!

Bevor wir ein Projekt entwickeln, führen wir häufig zunächst eine Bedarfsanalyse durch. Für das Frontend können wir eine grundlegende Komponentenbibliothek recherchieren oder auswählen, um unsere Arbeitseffizienz zu verbessern. Denn ein Unternehmen, dem der Zeitaufwand am Herzen liegt, wird Ihnen schließlich keine Zeit lassen, Fernsehserien anzusehen und Spiele zu spielen, um eine kalenderähnliche Komponente zu entwickeln. Allerdings können nicht alle Komponentenbibliotheken auf dem Markt unsere Anforderungen erfüllen. Zu diesem Zeitpunkt müssen wir die Komponenten selbst handschreiben, um sie auf das Projekt anzuwenden.

Und das möchte ich sagen: Wie gestaltet man Komponenten so, dass sie einfach anzuwenden sind (oder die Menge an Code reduzieren), während gleichzeitig die Skalierbarkeit verbessert und Bedarfsänderungen und die anschließende Wartung erleichtert werden?

Es gibt viele Möglichkeiten, und die Verwendung von Ref zum Bedienen von Dom ist eine davon. Diese Methode macht es uns jedoch schwer, die interaktiven Komponenten bei der Verwaltung und Bedienung von Dom ein- und auszublenden Es. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Lassen Sie uns die relevanten Wissenspunkte und Anwendungsbeispiele von Ref, die Dom bedienen, unter verschiedenen Gesichtspunkten analysieren Unterschied zwischen dem Betrieb von Dom in Vue2. Das Attribut $refs ist eigentlich eine Sammlung aller registrierten Refs, und ref entspricht den verschiedenen Komponenten oder gewöhnlichen Dom-Elementen in der Vorlage Quellcode ist auch über die native Methode getElementById Und der erhaltene Dom-Knoten

Man kann sagen, dass ref der syntaktische Zucker von document.getElementById ist. Die Referenz von Vue3 setzt die Verwendung von vue2 fort und fügt außerdem eine Funktion zum Erstellen reaktionsfähiger Daten hinzu

• Manche Leute fragen sich vielleicht, welche Methode ich während der Projektentwicklung wählen sollte, da sowohl ref als auch getElementById Dom erhalten können?
• In Bezug auf dieses Problem zeigen die Daten, dass $refs den Verbrauch beim Abrufen von Dom-Knoten im Vergleich zur Methode document.getElementById reduziert. Die spezifischen Gründe werden im nächsten Artikel ausführlich erläutert.

Ref-Operation Dom unterscheidet sich zwischen Vue2. Oder fügen Sie der Komponente das Attribut ref="xx" hinzu und verwenden Sie dann this.$refs.xx im Vue-Objekt, um den Dom direkt abzurufen und seine Methodenattribute zu bedienen,

<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

Die in der Vue3.2-Version verwendete Methode

//普通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>

Vielleicht hat hier jemand eine Frage, warum es danach an den entsprechenden Dom gebunden wird eine konstante Variable mit demselben Namen wie die Referenz der Vorlage deklarieren? Hier ist eine kleine zusätzliche Erklärung: document.getElementById的语法糖。vue3的ref延续了vue2的用法，还增加了一个作用就是创建响应式数据

也许有人会问了，既然ref和getElementById都能获取到Dom，那么在项目开发中，我选择哪种方式都没什么区别呢？

关于这个问题，经过数据表明，$refs相对document.getElementById的方法，会减少获取dom节点的消耗；而具体原因，等下一篇文章再详细探讨。

Ref操作Dom在Vue2.x和Vue3.x的不同

Vue2.x

我们只需要在相应的Dom元素或者组件加上ref="xx"属性,然后在Vue对象中使用this.$refs.xx,就可以直接获取到该Dom并操作其方法属性,

<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>

<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>

Vue3.2

在Vue3.2版本使用的方式

<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>

<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>

也许这里有人疑问，为什么声明了一个和template的ref中同名的常量变量就绑定了对应的dom? 在这里再补充说明一下：

• Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。而相应式的变量都是通过在setup()方法中return {写入需要在模版中使用的变量或方法}

<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>

• 在 3.0.0-beta.21 版本中增加了 5101c0cdbdc49998c642c71f6b6410a8 的实验特性。如果使用了，会提示 5101c0cdbdc49998c642c71f6b6410a8 还处在实验特性阶段。
• 在 3.2.0 版本中移除 5101c0cdbdc49998c642c71f6b6410a8 的实验状态，从此，宣告 5101c0cdbdc49998c642c71f6b6410a8 正式转正使用，成为框架稳定的特性之一 与组件选项 setup 函数对比， 5101c0cdbdc49998c642c71f6b6410a8 我们只需要写更少、更简洁的代码，不需要使用 return {} 暴露变量和方法了，使用组件时不需要主动注册了，会自动帮你绑定

所以在5101c0cdbdc49998c642c71f6b6410a8中声明的变量会自动被加到该Vue对象的本身this中，如

Vue3s Unterstützung für die Kompositions-API in früheren Versionen (vor 3.0.0-beta.21) kann nur in der Komponentenoptionsfunktion setup verwendet werden. Die entsprechenden Variablen werden alle in der setup()-Methode zurückgegeben {schreiben Sie die Variablen oder Methoden, die in der Vorlage verwendet werden müssen}rrreee

5101c0cdbdc49998c642c71f6b6410a8	3f1c4e4b6b16bbbd69b2ee476dc4f83a
const user = ref(null);	this.$ref.user

🎜In Version 3.0.0-beta.21 ist 09d943367b6aa226a8e2c5613388b8fd. Bei Verwendung wird angezeigt, dass sich 5101c0cdbdc49998c642c71f6b6410a8 noch in der experimentellen Funktionsphase befindet. 🎜🎜Der experimentelle Status von 5101c0cdbdc49998c642c71f6b6410a8 wurde in Version 3.2.0 entfernt. Von nun an wird angekündigt, dass 5101c0cdbdc49998c642c71f6b6410a8 offiziell verwendet wird wird zu einem stabilen Merkmal des Frameworks Im Vergleich zur Komponentenoption setup-Funktion 5101c0cdbdc49998c642c71f6b6410a8 müssen wir nur weniger und prägnanteren Code schreiben und müssen nicht return {} Variablen und Methoden werden offengelegt, wenn Sie die Komponente verwenden. Sie wird automatisch für Sie gebunden. Die in <code>5101c0cdbdc49998c642c71f6b6410a8 deklarierten Variablen werden also aktiviert automatisch zum Vue hinzugefügt werden Das Objekt selbst befindet sich darin, z. B. 🎜<script&gt ;🎜

5101c0cdbdc49998c642c71f6b6410a8

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 中，默认不会暴露任何在 5101c0cdbdc49998c642c71f6b6410a8 中声明的绑定，即不能通过模板 ref 获取到组件实例声明的绑定。 Vue3.2 提供了 defineExpose 编译器宏，可以显式地暴露需要暴露的组件中声明的变量和方法 （学习视频分享：vuejs入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Unterschieds zwischen der Ref-Operation Dom in Vue2.x und Vue3.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!