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 中声明函数：

直接声明函数

<code class="js">import { defineProps } from 'vue'

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

    // 其他逻辑...

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

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

<code class="js">import { defineProps, reactive } from 'vue'

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

    // 其他逻辑...

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

使用Vue.computed创建计算属性

<code class="js">import { defineProps, computed } from 'vue'

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

    // 其他逻辑...

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

使用Vue.watch创建侦听器

<code class="js">import { defineProps, watch } from 'vue'

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

    // 其他逻辑...

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

通过这些方法，可以在 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!