Comment déclarer des fonctions dans setup dans vue

Il existe 4 façons de déclarer des fonctions dans la configuration : déclarer des fonctions directement, utiliser Vue.reactive pour créer des objets réactifs variables, utiliser Vue.computed pour créer des propriétés calculées, utiliser Vue.watch pour créer des auditeurs

dans Vue in setup Déclaration de fonctions dans

Dans Vue 3.0, la fonction setup fournit une nouvelle façon de déclarer l'état réactif, les propriétés et les méthodes calculées. Voici comment déclarer des fonctions dans setup : setup 函数提供了声明响应式状态、计算属性和方法的新方式。以下是如何在 setup 中声明函数：

直接声明函数

import { defineProps } from 'vue'

export default {
  props: defineProps(['count']),
  setup() {
    function incrementCount() {
      // ...
    }

    // 其他逻辑...

    return {
      // ...其他响应式状态
      incrementCount
    }
  }
}

使用Vue.reactive创建可变响应式对象

import { defineProps, reactive } from 'vue'

export default {
  props: defineProps(['count']),
  setup() {
    const state = reactive({
      count: 0,
      increment: function() {
        // ...
      }
    })

    // 其他逻辑...

    return {
      // ...其他响应式状态
      ...state
    }
  }
}

使用Vue.computed创建计算属性

import { defineProps, computed } from 'vue'

export default {
  props: defineProps(['count']),
  setup() {
    const incrementCount = computed(() => {
      // ...
    })

    // 其他逻辑...

    return {
      // ...其他响应式状态
      incrementCount
    }
  }
}

使用Vue.watch创建侦听器

import { defineProps, watch } from 'vue'

export default {
  props: defineProps(['count']),
  setup() {
    const incrementCount = watch('count', (newValue, oldValue) => {
      // ...
    })

    // 其他逻辑...

    return {
      // ...其他响应式状态
      incrementCount
    }
  }
}

通过这些方法，可以在 Vue 3.0 的 setup

Déclarer les fonctions directement🎜rrreee🎜Créer une réactivité mutable à l'aide de l'objet Vue.reactive strong>🎜rrreee🎜Utilisez Vue.computed pour créer une propriété calculée🎜rrreee🎜Utilisez Vue.watch pour créer un auditeur 🎜rrreee🎜Grâce à ces méthodes, les fonctions peuvent être déclarées de manière réactive dans la fonction setup de Vue 3.0. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!