A brief analysis of the difference between Ref operation Dom in Vue2.x and Vue3.x-Vue.js-php.cn

Table of Contents

Details

Vue2.x

Vue3.2

defineExpose

Home

Web Front-end

Vue.js

A brief analysis of the difference between Ref operation Dom in Vue2.x and Vue3.x

青灯夜游

Jan 27, 2023 am 05:30 AM

front end vue.js

Why is Ref operating Dom both easy to use and efficient? The following article will talk about Ref operation, introduce the essence of Ref obtaining Dom, its difference between Vue2.x and Vue3.x, etc. I hope it will be helpful to everyone!

A brief analysis of the difference between Ref operation Dom in Vue2.x and Vue3.x

Before developing a project, we often do a needs analysis first. For the front-end, we can research or choose a basic component library to improve our Work efficiency. After all, for a company that cares about time costs, it won't give you time to watch TV series and play games to develop a calendar-like component. However, not all component libraries on the market can meet our needs. At this time, we need to handwrite the components ourselves to apply them to the project.

And this is what I want to say: How to design components so that they are easy to apply (or reduce the amount of code), while also improving scalability and facilitating demand changes and subsequent maintenance?

There are many ways, and using Ref to operate Dom is one of them, but this method allows us to maintain and operate Modal, Popup, and frequently operate Dom display and When hiding interactive components, it plays a great advantage. [Related recommendations: vuejs video tutorial, web front-end development]

The relevant knowledge points and application examples of Ref operating Dom are divided into several aspects. Let’s do the analysis

Ref gets the essence of Dom
The difference between Ref operating Dom in Vue2.x and Vue3.x
Ref operating component Dom and parent-child component single Transfer comparison

Details

Ref gets the essence of Dom

Vue object in Vue2.x The attribute $refs is actually a collection of all registered refs, and ref corresponds to the ref="xx" associated with different components or ordinary Dom elements in the template; the actual way to obtain ref in the source code is also through the native method getElementById The obtained Dom node; can be said that ref is the syntactic sugar of document.getElementById. The ref of vue3 continues the usage of vue2, and also adds a function of creating responsive data

Some people may ask, since both ref and getElementById can get Dom, then in the project During development, does it make no difference which method I choose?

Regarding this issue, data shows that $refs will reduce the consumption of obtaining dom nodes compared to the document.getElementById method; the specific reasons will be discussed in detail in the next article.

The difference between Ref operation Dom in Vue2.x and Vue3.x

Vue2.x

We only need to add the ref="xx" attribute to the corresponding Dom element or component, and then use this.$refs.xx in the Vue object to directly obtain the Dom and operate its method attributes,

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

Copy after login

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

Copy after login

Vue3.2

The method used in the Vue3.2 version

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

Copy after login

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

Copy after login

Maybe someone here has questions about why a constant with the same name as the template's ref is declared Are variables bound to the corresponding DOM? Here’s a little additional explanation:

Vue3’s support for composition api in earlier versions (before 3.0.0-beta.21) can only be done in the component option setup function used in. The corresponding variables are all returned in the setup() method {write the variables or methods that need to be used in the template}

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

Copy after login

In version 3.0.0-beta.21 Added experimental features of <script setup>. If used, it will prompt that <script setup> is still in the experimental feature stage.
Remove the experimental status of <script setup> in version 3.2.0. From now on, it is announced that <script setup> will be officially converted into regular use and become a stable framework. one of the characteristics of Compared with the component option setup function, <script setup> we only need to write less and more concise code, and do not need to use return {} to expose variables And method, you don’t need to actively register when using the component, it will automatically bind for you

So the variables declared in<script setup> will be automatically added to The Vue object itself is in this, such as

## <script setup>

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1667

CakePHP Tutorial

1426

Laravel Tutorial

1328

PHP Tutorial

1273

C# Tutorial

1255

Related knowledge

PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Is Django front-end or back-end? check it out! Jan 19, 2024 am 08:37 AM

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

Exploring Go language front-end technology: a new vision for front-end development Mar 28, 2024 pm 01:06 PM

As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces

C# development experience sharing: front-end and back-end collaborative development skills Nov 23, 2023 am 10:13 AM

As a C# developer, our development work usually includes front-end and back-end development. As technology develops and the complexity of projects increases, the collaborative development of front-end and back-end has become more and more important and complex. This article will share some front-end and back-end collaborative development techniques to help C# developers complete development work more efficiently. After determining the interface specifications, collaborative development of the front-end and back-end is inseparable from the interaction of API interfaces. To ensure the smooth progress of front-end and back-end collaborative development, the most important thing is to define good interface specifications. Interface specification involves the name of the interface

How to implement instant messaging on the front end Oct 09, 2023 pm 02:47 PM

Methods for implementing instant messaging include WebSocket, Long Polling, Server-Sent Events, WebRTC, etc. Detailed introduction: 1. WebSocket, which can establish a persistent connection between the client and the server to achieve real-time two-way communication. The front end can use the WebSocket API to create a WebSocket connection and achieve instant messaging by sending and receiving messages; 2. Long Polling, a technology that simulates real-time communication, etc.

Django: A magical framework that can handle both front-end and back-end development! Jan 19, 2024 am 08:52 AM

Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning

Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

Combination of Golang and front-end technology: explore how Golang plays a role in the front-end field Mar 19, 2024 pm 06:15 PM

Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn

See all articles