VUE3 함수 선언 및 사용

반응형 데이터가 어떻게 사용되는지 이해한 후 다음 단계는 기능을 이해하는 것입니다.

Vue 2에서 함수는 일반적으로 현재 구성 요소 인스턴스의 메서드로 메서드에서 선언된 다음 마운트와 같은 수명 주기에서 호출되거나 템플릿에서 클릭과 같은 동작에 의해 트리거됩니다. 구성 요소가 구성 요소 인스턴스를 얻기 위해 종종 이를 사용해야 하기 때문입니다. 이므로 화살표 기능을 사용할 수 없습니다.

export default {
    
    
  data: () => {
    
    
    return {
    
    
      num: 0,
    }
  },
  mounted: function () {
    
    
    this.add()
  },
  methods: {
    
    
    // 不可以使用 `add: () => this.num++`
    add: function () {
    
    
      this.num++
    },
  },
}

Vue 3에서는 훨씬 더 유연해 일반 함수, 클래스 클래스, 화살표 함수, 익명 함수 등을 사용하여 선언할 수 있으며 독립 . js / .ts 파일 그런 다음 가져와서 사용하세요.

컴포넌트 생성 시 자동으로 실행되어야 하는 함수는 Vue 3의 라이프사이클을 따라야 하며, 템플릿에서 @click, @change 등의 액션에 의해 트리거되어야 하며, 변수와 마찬가지로 함수 이름도 설정.

다음은 개발자가 보다 직관적으로 이해할 수 있는 간단한 예입니다.

<template>
  <p>{
    
    {
    
     msg }}</p>

  <!-- 在这里点击执行 `return` 出来的方法 -->
  <button @click="updateMsg">修改MSG</button>
</template>

<script lang="ts">
import {
    
     defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
    
    
  setup() {
    
    
    const msg = ref<string>('Hello World!')

    // 这个要暴露给模板使用，必须 `return` 才可以使用
    function updateMsg() {
    
    
      msg.value = 'Hi World!'
    }

    // 这个要在页面载入时执行，无需 `return` 出去
    const init = () => {
    
    
      console.log('init')
    }

    onMounted(() => {
    
    
      init()
    })

    return {
    
    
      msg,
      changeMsg,
    }
  },
})
</script>

VUE3 함수 선언 및 사용

Supongo que te gusta