Zero Basics에서 Vue3 기능 시작하기: Vue3의 핵심 메소드를 빠르게 마스터하세요

프런트엔드 기술의 지속적인 발전으로 Vue.js는 매우 인기 있는 프런트엔드 프레임워크가 되었습니다. Vue.js의 최신 버전인 Vue 3에서는 새로운 기능과 메소드가 도입되고 기존의 기능과 메소드가 업그레이드되었습니다. 이 기사에서는 독자가 Vue 3 프레임워크를 빠르게 시작할 수 있도록 Vue 3의 몇 가지 핵심 기능과 방법을 소개합니다.

1. createApp

Vue 3에서는 createApp 함수를 사용하여 Vue 인스턴스를 생성합니다. createApp 함수는 애플리케이션 옵션이 포함된 객체인 하나의 매개변수를 사용합니다. createApp 함수를 사용하여 Vue 인스턴스를 생성하는 샘플 코드는 다음과 같습니다.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')

위 코드에서는 데이터 객체 데이터를 사용하여 메시지 변수를 선언한 다음 createApp 함수를 사용하여 Vue 인스턴스를 생성합니다. 마지막으로 mount 함수를 사용하여 ID app이 있는 요소에 Vue 인스턴스를 마운트합니다.

2. reactive

Vue 3에서는 반응 함수를 사용하여 JavaScript 객체를 반응 객체로 변환할 수 있습니다. 반응형 객체를 사용하면 객체의 변경 사항을 쉽게 모니터링하고 객체의 속성이 변경되면 뷰를 자동으로 업데이트할 수 있습니다. 리액티브 객체를 생성하기 위해 리액티브 함수를 사용하는 샘플 코드는 다음과 같습니다:

const obj = { count: 0 }
const reactiveObj = Vue.reactive(obj)

console.log(reactiveObj.count) // 输出0

reactiveObj.count++

console.log(reactiveObj.count) // 输出1

위 코드에서는 리액티브 함수를 사용하여 JavaScript 객체 obj를 리액티브 객체인activeObj로 변환합니다. 그런 다음 반응성 객체의 count 속성을 출력하여 반응성 객체가 제대로 작동하는지 확인할 수 있습니다.

3. computed

Vue 3에서는 계산 함수를 사용하여 계산 속성을 생성할 수 있습니다. 계산된 속성은 다른 속성의 값에 따라 달라지는 속성으로, 해당 값은 다른 값을 기반으로 계산됩니다. 계산 함수를 사용하여 계산 속성을 생성하는 샘플 코드는 다음과 같습니다.

const reactiveObj = Vue.reactive({
  count: 0
})

const computedVal = Vue.computed(() => {
  return reactiveObj.count * 2
})

console.log(computedVal.value) // 输出0

reactiveObj.count++

console.log(computedVal.value) // 输出2

위 코드에서는 값이 반응성 Obj.count의 두 배인 계산 속성 계산된 Val을 정의합니다. 반응성Obj.count 값이 변경되면 계산된Val 값이 자동으로 업데이트됩니다.

4. watch

Vue 3에서는 watch 기능을 사용하여 Vue 인스턴스의 데이터를 모니터링할 수 있습니다. 데이터가 변경되면 특정 작업을 수행할 수 있습니다. Vue 인스턴스의 데이터를 모니터링하기 위해 watch 함수를 사용하는 샘플 코드는 다음과 같습니다.

const reactiveObj = Vue.reactive({
  count: 0
})

Vue.watch(() => {
  return reactiveObj.count
}, (newVal, oldVal) => {
  console.log(`count变化了：${oldVal} -> ${newVal}`)
})

reactiveObj.count++ // 输出"count变化了：0 -> 1"

위 코드에서는activeObj.count의 변경 사항을 모니터링하는 watch 함수를 정의합니다. activeObj.count의 값이 변경되면 watch 함수는 해당 콜백 함수를 실행합니다.

5. provide and inject

Vue 3에서는 제공 및 주입 기능을 사용하여 구성 요소 간의 종속성 주입을 구현할 수 있습니다. 제공 및 삽입 기능을 사용하면 상위 구성 요소가 소품 및 이벤트를 통해 데이터를 전달하지 않고 하위 구성 요소에 데이터를 전달할 수 있습니다. Provide 및 Inject 함수를 사용한 종속성 주입 샘플 코드는 다음과 같습니다.

const theme = Vue.reactive({
  color: 'red'
})

const ThemeProvider = {
  provide: {
    theme
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
}

const ThemeConsumer = {
  inject: ['theme'],
  template: `
    <div :style="{ color: theme.color }">
      <slot></slot>
    </div>
  `
}

const app = Vue.createApp({
  components: {
    ThemeProvider,
    ThemeConsumer
  }
})

app.mount('#app')

위 코드에서는 ThemeProvider 구성 요소와 ThemeConsumer 구성 요소를 정의합니다. ThemeProvider 구성 요소는 제공 기능을 사용하여 하위 구성 요소인 ThemeConsumer에 테마 데이터를 제공합니다. ThemeConsumer 구성 요소는 주입 함수를 사용하여 상위 구성 요소 ThemeProvider에서 테마 데이터를 가져옵니다. 마지막으로 ThemeProvider 및 ThemeConsumer 구성 요소를 Vue 인스턴스에 등록합니다.

요약

위는 Vue 3의 5가지 핵심 기능과 메소드입니다. 이러한 핵심 기능과 메소드를 학습함으로써 Vue 3의 프레임워크 구조와 기능적 특징을 더 깊이 이해할 수 있습니다. 동시에 Vue 3를 더 잘 사용하여 효율적이고 안정적이며 유연한 프런트 엔드 애플리케이션을 구축할 수도 있습니다.

위 내용은 Zero Basics에서 Vue3 기능 시작하기: Vue3의 핵심 메소드를 빠르게 마스터하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!