vue3中的setup函數(shù)如何使用

這篇文章主要講解了“vue3中的setup函數(shù)如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue3中的setup函數(shù)如何使用”吧！

概述 

一、 初識(shí)setup函數(shù) 

組件中所用到的：數(shù)據(jù)、方法等等均要配置在setup中，這也就意味著在Vue2中寫(xiě)的data、methods在這里都不再推薦使用。

這樣的配置讓對(duì)象式編程趨近于了函數(shù)式編程。

<script>export default {  name: 'App',  // 最為原始的對(duì)象寫(xiě)法是這樣，但是通過(guò)es6我們可以簡(jiǎn)寫(xiě)  // setup: function(){}  setup () {    // 數(shù)據(jù)    let name = '黑貓幾絳'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }  }}</script>

了解過(guò)Vue2響應(yīng)式原理的話你可能會(huì)有疑問(wèn)說(shuō)，在這個(gè)地方name和age并不是響應(yīng)式的。

的確如此，在這里我們僅僅是測(cè)試一下setup中是否可以放入數(shù)據(jù)與方法，響應(yīng)式在后面的專(zhuān)欄文章中介紹。

如果此時(shí)未了解響應(yīng)原理，可以看看我以前的一篇文章，這篇文章里有詳細(xì)介紹

二、 關(guān)于setup的返回值

僅僅存放數(shù)據(jù)與方法還不夠，我們需要將他們作為返回值返回出去，在模板中便可以直接使用。

<template>  <h2>我叫{{name}}，我今年{{age}}了</h2></template> <script>export default {  name: 'App',  // 最為原始的對(duì)象寫(xiě)法是這樣，但是通過(guò)es6我們可以簡(jiǎn)寫(xiě)  // setup: function(){}  setup () {    // 數(shù)據(jù)    let name = '黑貓幾絳'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }    return{      name,      age,      sayHello    }  }}</script>

在概述里面還介紹了setup的另外一種返回值，即返回一個(gè)渲染函數(shù)，這個(gè)函數(shù)的方法有一點(diǎn)像React.creatElement，可以自定義渲染的內(nèi)容。

<script>import {h} from 'vue'export default {  name: 'App',  setup () {    // 在頁(yè)面上渲染出一個(gè)h2標(biāo)簽    return ()=> h('h2', '黑貓幾絳')  }}</script>

三、 關(guān)于setup的參數(shù)

# App.vue<template>  <Demo msg="hello" name="world" @hello="changeId">    <template v-slot:test>      摸魚(yú)    </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>

感謝各位的閱讀，以上就是“vue3中的setup函數(shù)如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue3中的setup函數(shù)如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！