Analisis ringkas tentang penggunaan fungsi setup() dan reactive() dalam vue3

Artikel ini akan membincangkan konsep asas gabungan API dalam projek vue3, konsep setup() fungsi kemasukan dan penggunaan reactive().

1. Gabungan struktur projek vue2 perbandingan API

Dalam vue2

• Kebaikan: mudah dipelajari dan digunakan, lokasi penulisan kod telah dipersetujui.

• 2. Kelemahan: Untuk projek besar, ia tidak sesuai untuk penggunaan semula, pengurusan dan penyelenggaraan.

• 3. Penjelasan: Data dan logik perniagaan bagi fungsi yang sama bertaburan di N tempat dalam fail yang sama Apabila kerumitan perniagaan meningkat, kita perlu sering menggunakan data yang serupa dengan data () Dan pemprosesan bolak-balik dalam kaedah

dalam vue3

• 1 Kelebihan: Data dan logik perniagaan dengan fungsi yang sama boleh disusun bersama untuk memudahkan penggunaan semula dan penyelenggaraan.

• 2 Kelemahan: Ia memerlukan penyusunan kod dan keupayaan pemisahan yang baik, dan ia tidak semudah Vue2.

• 3 Penjelasan: Nota: Untuk membolehkan semua orang beralih kepada versi Vue3.0 dengan lebih baik, kaedah penulisan API pilihan Vue2.x juga disokong pada masa ini.

2. Penggunaan fungsi persediaan()

2.1 Konsep asas fungsi setup()

Setup() dalam Vue3 ialah item konfigurasi komponen baharu dalam Vue3, yang digunakan untuk menggantikan data() dan kaedah(dalam Vue2 ), dikira() dan item konfigurasi lain. setup() menyediakan kaedah penulisan yang lebih ringkas dan boleh menggunakan API Komposisi yang disediakan oleh Vue3 dengan lebih baik. Fungsi setup() menerima dua parameter, props dan context. Antaranya, prop ialah nilai harta yang diterima oleh komponen, dan konteks mengandungi beberapa maklumat konfigurasi komponen.

• 1. Apakah itu: persediaan ialah item konfigurasi komponen baharu dalam Vue3, yang berfungsi sebagai fungsi kemasukan API gabungan.

• 2 Masa pelaksanaan: Dipanggil sebelum penciptaan instance, malah lebih awal daripada sebelumnyaBuat dalam Vue2.

• 3 Nota: Memandangkan tika itu belum dibuat semasa melaksanakan persediaan, data dalam data dan kaedah tidak boleh digunakan secara langsung dalam persediaan, jadi ini dalam persediaan Vue3 juga terikat kepada. tidak ditentukan.

Walaupun item konfigurasi data dan kaedah dalam Vue2 juga boleh digunakan dalam Vue3, adalah tidak disyorkan bahawa data dan kaedah ditulis dalam fungsi persediaan dan melaluinya kembali Untuk kembali, anda boleh menggunakan terus dalam templat (secara amnya, persediaan tidak boleh menjadi fungsi tak segerak).

Pengalaman pertama 2.2.setup()

App.vue

<template>
    <h1 @click="say()">{{ msg }}</h1>
</template>
<script>
    export default {
        setup() {
            const msg = &#39;Hello Vue3&#39;
            const say = () => {
                console.log(msg)
            }
            return { msg, say }
        },
    }
</script>

Paparan kesan:

Nota: Sama seperti data() dan kaedah dalam vue2, ia perlu ditulis sebagai balasan sebelum ia boleh dipanggil sebagai hasil.

[Tambahan soalan temu bual kecil] Adakah pemulangan dalam persediaan hanya satu objek? (persediaan juga boleh mengembalikan fungsi pemaparan)

App.vue

<script>
    import { h } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            return () => h(&#39;h2&#39;, &#39;Hello Vue3&#39;)
        },
    }
</script>

Konsol mencetak Hello Vue3 dengan teg h2.

2.3.reactive() function

Gunakan fungsi reaktif untuk membalut tatasusunan menjadi data responsif. reaktif ialah fungsi yang digunakan untuk membungkus objek/susunan biasa ke dalam data reaktif untuk digunakan Ia tidak boleh mengendalikan jenis data asas secara langsung (kerana ia berdasarkan Proksi, dan Proksi hanya boleh objek proksi).

Sebagai contoh, apabila saya mempunyai keperluan: klik untuk memadam maklumat baris semasa
App.vue

<template>
    <ul>
        <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
    </ul>
</template>

<script>
    export default {
        name: &#39;App&#39;,
        setup() {
            const arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>

Lihat melalui vueTools, datanya dipadamkan selepas saya mengklik , tetapi tiada pemaparan sebenar pada halaman

Pada masa ini, gunakan reactive() untuk membalut tatasusunan untuk menjadikannya data responsif

<template>
    <ul>
        <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const arr = reactive([&#39;a&#39;, &#39;b&#39;, &#39;c&#39;])
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>

Pada masa ini halaman responsif, dipadamkan apabila diklik dan halaman responsif

Begitu juga: kami menggunakan reactive() untuk membungkus objek kami untuk gunakan

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const state = reactive({
                arr: [
                    {
                        id: 0,
                        name: &#39;ifer&#39;,
                    },
                    {
                        id: 1,
                        name: &#39;elser&#39;,
                    },
                    {
                        id: 2,
                        name: &#39;xxx&#39;,
                    },
                ],
            })
            const removeItem = (index) => {
                // 默认是递归监听的，对象里面任何一个数据的变化都是响应式的
                state.arr.splice(index, 1)
            }

            const user = reactive({
                id: &#39;&#39;,
                name: &#39;&#39;,
            })
            const handleSubmit = () => {
                state.arr.push({
                    id: user.id,
                    name: user.name,
                })
                user.id = &#39;&#39;
                user.name = &#39;&#39;
            }
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

Tafsiran kod di atas:

Saya menentukan kotak input dan pemadaman serta penambahan Operasi, gunakan model v untuk mencipta data mengikat dua hala untuk melengkapkan penambahan dan pemadaman data saya.
Adakah anda kini mempunyai pemahaman yang lebih jelas tentang penggunaan setup()? Mari permudahkan kaedah penulisan kami di bawah.

2.3.1 Pengekstrakan lanjut reactive()

Pengoptimuman: mengekstrak data dan logik perniagaan bagi fungsi yang sama ke dalam satu fungsi, kod Lebih mudah dibaca dan lebih mudah digunakan semula.

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    function useRemoveItem() {
        const state = reactive({
            arr: [
                {
                    id: 0,
                    name: &#39;ifer&#39;,
                },
                {
                    id: 1,
                    name: &#39;elser&#39;,
                },
                {
                    id: 2,
                    name: &#39;xxx&#39;,
                },
            ],
        })
        const removeItem = (index) => {
            state.arr.splice(index, 1)
        }
        return { state, removeItem }
    }
    function useAddItem(state) {
        const user = reactive({
            id: &#39;&#39;,
            name: &#39;&#39;,
        })
        const handleSubmit = () => {
            state.arr.push({
                id: user.id,
                name: user.name,
            })
            user.id = &#39;&#39;
            user.name = &#39;&#39;
        }
        return {
            user,
            handleSubmit,
        }
    }
    export default {
        name: &#39;App&#39;,
        setup() {
            const { state, removeItem } = useRemoveItem()
            const { user, handleSubmit } = useAddItem(state)
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。

2.3.2reactive()再进行进一步文件拆分并且引入

App.vue

<template>
  <form >
      <input type="text" v-model="user.id" />
      <input type="text" v-model="user.name" />
      <button type="submit" @click.prevent="submit">提交</button>
  </form>
  <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
  </ul>
</template>

<script>
import {useRemoveItem,handleSubmit} from &#39;./hooks&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const { state, removeItem } = useRemoveItem()
          const { user, submit } = handleSubmit(state)
          return {
              state,removeItem,user,submit
          }
      },
  }
</script>

hooks/index.js

import { reactive } from 'vue'
export const useRemoveItem=()=> {
  const state= reactive( {
          arr: [
                    {
                        id: 0,
                        name: 'ifer',
                    },
                    {
                        id: 1,
                        name: 'elser',
                    },
                    {
                        id: 2,
                        name: 'xxx',
                    },
                ]
              })
  const removeItem=(index)=>{
      state.arr.splice(index,1)
            console.log(state.arr);
          }
      return { state, removeItem }
}
export const handleSubmit=(state)=>{
  const user = reactive({
                id: '',
                name: '',
            })
            console.log(1);
  const submit = () => {
       state.arr.push({
        ...user
       })
       user.id = ''
       user.name = ''
            }
      return { user, submit }
}

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Analisis ringkas tentang penggunaan fungsi setup() dan reactive() dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!