vue3組合式API中setup()概念和reactive()函數的用法是什么

本篇內容主要講解“vue3組合式API中setup()概念和reactive()函數的用法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue3組合式API中setup()概念和reactive()函數的用法是什么”吧!

一、組合式API對比vue2項目結構

在vue2當中

• 1.優點：易于學習和使用，寫代碼的位置已經約定好。

• 2.缺點：對于大型項目，不利于代碼的復用、不利于管理和維護。

• 3.解釋：同一功能的數據和業務邏輯分散在同一個文件的 N 個地方，隨著業務復雜度的上升，我們需要經常在類似于data()以及methods中進行來回的處理

在vue3當中

• 1.優點：可以把同一功能的數據和業務邏輯組織到一起，方便復用和維護。

• 2.缺點：需要有良好的代碼組織和拆分能力，相對沒有 Vue2 容易上手。

• 3.解釋：注意：為了能讓大家較好的過渡到 Vue3.0 版本，目前也是支持 Vue2.x 選項 API 的寫法。

二、setup()函數的使用

2.1setup()函數的基礎概念

Vue3 中的 setup() 是 Vue3 新增的組件配置項，用于替代 Vue2 中的 data()、methods()、computed() 等配置項。setup() 提供了更簡潔的編寫方式，且能夠更好地利用 Vue3 提供的 Composition API。setup() 函數接受兩個參數，分別是 props 和 context。其中，props 是組件接收的屬性值，context 包含了一些組件的配置信息。

• 1.是什么：setup 是 Vue3 中新增的組件配置項，作為組合 API 的入口函數。

• 2.執行時機：實例創建前調用，甚至早于 Vue2 中的 beforeCreate。

• 3.注意點：由于執行 setup 的時候實例還沒有 created，所以在 setup 中是不能直接使用 data 和 methods 中的數據的，所以 Vue3 setup 中的 this 也被綁定為了 undefined。

雖然 Vue2 中的 data 和 methods 配置項雖然在 Vue3 中也能使用，但不建議了，建議數據和方法都寫在 setup 函數中，并通過 return 進行返回可在模版中直接使用（一般情況下 setup 不能為異步函數）。

2.2.setup()初體驗

App.vue

<template>
    <h2 @click="say()">{{ msg }}</h2>
</template>
<script>
    export default {
        setup() {
            const msg = 'Hello Vue3'
            const say = () => {
                console.log(msg)
            }
            return { msg, say }
        },
    }
</script>

效果查看：

注意：酷似于vue2中的data()與methods都是需要寫在return才可作為結果進行調用。
【小小面試題補充】setup 中 return 的一定只能是一個對象嗎？（setup 也可以返回一個渲染函數）
App.vue

<script>
    import { h } from 'vue'
    export default {
        name: 'App',
        setup() {
            return () => h('h3', 'Hello Vue3')
        },
    }
</script>

控制臺則是打印出了h3標簽的Hello Vue3。

2.3.reactive()函數

使用 reactive 函數包裝數組為響應式數據。reactive 是一個函數，用來將普通對象/數組包裝成響應式式數據使用，無法直接處理基本數據類型（因為它是基于 Proxy 的，而 Proxy 只能代理的是對象）。

比如當我有一個需求：點擊刪除當前行信息
App.vue

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

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

通過vueTools查看，我點擊過后數據是被刪除了，但頁面上并沒有事實的渲染出來

此時，使用 reactive()包裝數組使變成響應式數據,別忘了導入

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

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

此刻頁面也就具有了響應式，點擊時刪除，頁面則是響應式的
同理：我們用reactive()來包裹我們的對象來使用

<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 'vue'
    export default {
        name: 'App',
        setup() {
            const state = reactive({
                arr: [
                    {
                        id: 0,
                        name: 'ifer',
                    },
                    {
                        id: 1,
                        name: 'elser',
                    },
                    {
                        id: 2,
                        name: 'xxx',
                    },
                ],
            })
            const removeItem = (index) => {
                // 默認是遞歸監聽的，對象里面任何一個數據的變化都是響應式的
                state.arr.splice(index, 1)
            }

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

上述代碼的解意：
我定義了輸入框，定義了刪除、添加事件的操作，通過v-model打到雙向綁定數據來完成對我的數據進行增加與刪除。
到目前你是不是對setup()的使用有了更加清晰的認識呢？下面再來簡化一下我們的寫法。

2.3.1reactive()的進一步抽離

優化：將同一功能的數據和業務邏輯抽離為一個函數，代碼更易讀，更容易復用。

<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 'vue'
    function 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)
        }
        return { state, removeItem }
    }
    function useAddItem(state) {
        const user = reactive({
            id: '',
            name: '',
        })
        const handleSubmit = () => {
            state.arr.push({
                id: user.id,
                name: user.name,
            })
            user.id = ''
            user.name = ''
        }
        return {
            user,
            handleSubmit,
        }
    }
    export default {
        name: 'App',
        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 './hooks'
  export default {
      name: 'App',
      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 }
}

到此，相信大家對“vue3組合式API中setup()概念和reactive()函數的用法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！