溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue3中setup()和reactive()函數怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在vue2當中
1.優點：易于學習和使用，寫代碼的位置已經約定好。
2.缺點：對于大型項目，不利于代碼的復用、不利于管理和維護。
3.解釋：同一功能的數據和業務邏輯分散在同一個文件的 N 個地方，隨著業務復雜度的上升，我們需要經常在類似于data()以及methods中進行來回的處理
在vue3當中
1.優點：可以把同一功能的數據和業務邏輯組織到一起，方便復用和維護。
2.缺點：需要有良好的代碼組織和拆分能力，相對沒有 Vue2 容易上手。
3.解釋：注意：為了能讓大家較好的過渡到 Vue3.0 版本，目前也是支持 Vue2.x 選項 API 的寫法。
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 不能為異步函數）。
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。
使用 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()的使用有了更加清晰的認識呢？下面再來簡化一下我們的寫法。
優化：將同一功能的數據和業務邏輯抽離為一個函數，代碼更易讀，更容易復用。
<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>將方法抽離出來，用類似于導入的方式進行一個抽離，將數據與方法放在一起，便于我們的統一管理。
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中setup()和reactive()函數怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
