VUE3関数の宣言と使用

リアクティブデータがどのように使用されるかを理解したら、次のステップは関数を理解することです。

Vue 2 では、関数は通常、現在のコンポーネントインスタンスのメソッドとしてメソッド内で宣言され、マウントなどのライフサイクルで呼び出されるか、テンプレート内のクリックなどの動作によってトリガーされます。これは、コンポーネントがコンポーネントインスタンスを取得するためにこれを使用する必要があることが多いためです。 , そのため、アロー関数は使用できません。

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

Vue 3 ではさらに柔軟になり、通常の関数、Class クラス、アロー関数、匿名関数などを宣言してセットアップに記述して直接使用することも。 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>

おすすめ