VUE3 초보자를 위한 필수 개발 기술 및 예시-View.js-php.cn

VUE3 초보자를 위한 필수 개발 기술 및 예시

王林

풀어 주다： 2023-06-16 09:00:10

원래의

899명이 탐색했습니다.

VUE3는 프런트엔드 프레임워크 중에서 점점 더 많이 사용되는 프레임워크 중 하나이며 점점 더 많은 개발자가 이를 배우고 사용하기 시작하고 있습니다. 특히 중국에서는 VUE3의 적용이 모바일과 PC 모두에서 다양한 분야를 포괄했습니다. 따라서 이 기사에서는 초보자에게 VUE3 개발에 대한 몇 가지 필수 팁과 예제를 제공하여 보다 빠르고 효율적으로 개발할 수 있도록 돕습니다.

VUE3 스캐폴딩을 사용하여 프로젝트를 빠르게 생성하세요

VUE3를 학습하는 과정에서 많은 사람들이 프로젝트를 단계별로 구축할 수 있는데, 이는 많은 시간이 걸리고 오류가 발생하기 쉽습니다. 따라서 VUE3와 함께 제공되는 스캐폴딩 도구를 사용하여 Vue 프로젝트를 빠르게 만들 수 있습니다. 명령은 다음과 같습니다.

npm install -g @vue/cli
vue create my-project

로그인 후 복사

이 명령을 사용하면 VUE3 기반 프로젝트를 빠르게 만들 수 있습니다.

VUE3에서 Composition API 사용

VUE3에는 구성 요소의 로직을 보다 편리하게 관리할 수 있는 새로운 Composition API가 추가되었습니다. Composition API를 사용하면 동일한 로직을 함수로 추출하여 구성 요소에서 재사용할 수 있으므로 코드의 유지 관리성과 가독성이 향상됩니다. 샘플 코드는 다음과 같습니다.

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(){
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})

로그인 후 복사

위 코드에서는 defineComponent 함수를 사용하여 컴포넌트를 정의하고, setup 함수를 사용하여 정의된 반응 변수를 초기화했습니다. 여기서 ref를 사용하여 반응 변수를 정의하고, 화살표 함수를 사용하여 반응 함수 increment를 정의하고, 이 두 변수와 함수를 범위에 반환합니다. 이를 통해 구성 요소가 더욱 단순화되고 재사용 가능해졌습니다. defineComponent函数来定义一个组件，并使用setup函数来初始化定义的响应式变量和函数；其中用到了ref来定义响应式变量，使用箭头函数来定义响应式函数increment，并在范围内返回这两个变量和函数。这样可以使我们的组件更加简化和可复用。

使用VUE3中的Teleport组件

VUE3新增了Teleport组件，它可以让我们将某个组件在页面中的特定位置渲染，这种功能在实际项目中非常实用。比如我们可以使用Teleport在<body>中插入一个模态框组件，这样不仅可以保证模态框组件的样式覆盖范围更大，而且使得代码更加简洁易读。示例代码如下：

<template>
  <teleport to="body">
    <Modal :visible="visible" @update:visible="onClose"/>
  </teleport>
</template>

로그인 후 복사

在上述代码中，我们在<Modal>组件外部添加了一个<teleport>标签，然后将其to属性设置为"body"，这将会将<Modal>组件渲染到页面的<body>标签中。

使用VUE3中的Fragment组件

VUE3中新增的Fragment组件，可以让我们在不添加额外节点的情况下，返回多个子节点。这在实际开发中也非常方便，可以使得代码更加简洁清晰。示例代码如下：

<template>
  <div>
    <h1>Hello World!</h1>
    <Fragment>
      <p>Welcome to </p>
      <p>VUE3 World</p>
    </Fragment>
  </div>
</template>

로그인 후 복사

在上述代码中，我们使用Fragment组件，将两个标签进行了合并，并将它们作为一个整体的子节点，这样可以使得语义更加清晰。

使用VUE3中的全局组件

在VUE3中，可以通过app.component来定义全局组件，全局组件可以在任何地方使用，使得代码复用更加方便。示例代码如下：

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})

app.component('myComponent', MyComponent)

app.mount('#app')

로그인 후 복사

在上述代码中，我们定义了一个命名为myComponent的全局组件，它的模板是由MyComponent.vue文件定义的。然后我们使用app.mount

Teleport

<body>

<Modal>

<teleport>

"body"

<modal></modal>

조각

Fragment

app.comComponent