Rumah > hujung hadapan web > View.js > teks badan

Bagaimana untuk mengisytiharkan fungsi dalam persediaan dalam vue

下次还敢
Lepaskan: 2024-05-09 19:12:19
asal
585 orang telah melayarinya

Terdapat 4 cara untuk mengisytiharkan fungsi dalam persediaan: mengisytiharkan fungsi secara terus, gunakan Vue.reactive untuk mencipta objek reaktif berubah-ubah, gunakan Vue.computed untuk mencipta sifat yang dikira, gunakan Vue.watch untuk mencipta pendengar

Bagaimana untuk mengisytiharkan fungsi dalam persediaan dalam vue

dalam Vue dalam persediaan Mengisytiharkan fungsi dalam

Dalam Vue 3.0, fungsi setup menyediakan cara baharu untuk mengisytiharkan keadaan reaktif, sifat dan kaedah yang dikira. Begini caranya untuk mengisytiharkan fungsi dalam persediaan: setup 函数提供了声明响应式状态、计算属性和方法的新方式。以下是如何在 setup 中声明函数:

直接声明函数

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

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

    // 其他逻辑...

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

使用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>
Salin selepas log masuk

使用Vue.computed创建计算属性

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

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

    // 其他逻辑...

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

使用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>
Salin selepas log masuk

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

Isytihar fungsi secara terus🎜rrreee🎜Buat kereaktifan boleh ubah menggunakan Vue.reactive Objek kuat>🎜rrreee🎜Gunakan Vue.computed untuk mencipta harta yang dikira🎜rrreee🎜Gunakan Vue.watch untuk mencipta pendengar 🎜rrreee🎜Melalui kaedah ini, fungsi boleh diisytiharkan secara responsif dalam fungsi setup Vue 3.0. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mengisytiharkan fungsi dalam persediaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan