關(guān)于vue3中setup函數(shù)的使用
更新時間：2022年04月23日 09:18:02 作者：黑貓幾絳
這篇文章主要介紹了關(guān)于vue3中setup函數(shù)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
概述
一、 初識setup函數(shù)
組件中所用到的：數(shù)據(jù)、方法等等均要配置在setup中，這也就意味著在Vue2中寫的data、methods在這里都不再推薦使用。
這樣的配置讓對象式編程趨近于了函數(shù)式編程。
<script>
export default {
name: 'App',
// 最為原始的對象寫法是這樣，但是通過es6我們可以簡寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
}
}
</script>了解過Vue2響應(yīng)式原理的話你可能會有疑問說，在這個地方name和age并不是響應(yīng)式的。
的確如此，在這里我們僅僅是測試一下setup中是否可以放入數(shù)據(jù)與方法，響應(yīng)式在后面的專欄文章中介紹。
如果此時未了解響應(yīng)原理，可以看看我以前的一篇文章，這篇文章里有詳細介紹
二、 關(guān)于setup的返回值
僅僅存放數(shù)據(jù)與方法還不夠，我們需要將他們作為返回值返回出去，在模板中便可以直接使用。
<template>
<h1>我叫{{name}}，我今年{{age}}了</h1>
</template>
<script>
export default {
name: 'App',
// 最為原始的對象寫法是這樣，但是通過es6我們可以簡寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
return{
name,
age,
sayHello
}
}
}
</script>在概述里面還介紹了setup的另外一種返回值，即返回一個渲染函數(shù)，這個函數(shù)的方法有一點像React.creatElement，可以自定義渲染的內(nèi)容。
<script>
import {h} from 'vue'
export default {
name: 'App',
setup () {
// 在頁面上渲染出一個h1標簽
return ()=> h('h1', '黑貓幾絳')
}
}
</script>三、 關(guān)于setup的參數(shù)
# App.vue
<template>
<Demo msg="hello" name="world" @hello="changeId">
<template v-slot:test>
摸魚
</template>
</Demo>
</template># Demo.vue
<script>
export default {
name:'Demo',
props:['msg'],
setup(props,context){
console.log(props);
console.log(context.attrs);
console.log(context.slots);
console.log(context.emit);
}
}
</script>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個 js 對象,包含我們組件script中的任意功能選項,下面就跟隨小編一起來看看它的具體使用吧2024-03-03
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了如何使用crypto-js對文件上傳下載進行加密處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue中slot-scope的深入理解（適合初學(xué)者）
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個教程非常適合初學(xué)者,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
基于VUE實現(xiàn)簡單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實現(xiàn)一個簡單的學(xué)生信息管理系統(tǒng),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了詳解使用jest對vue項目進行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決
這篇文章主要介紹了vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件，詳細解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
本文主要介紹了Vue3中同時定義多個插槽的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12