Vue3（setup函数介绍）

ゝ一纸荒年。 2022-09-08 13:56 132阅读 0赞

> Composition Api  
> setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。  
> 调用时机：  
> setup函数会在beforeCreate钩子之前被调用  
> 返回值  
> 如果setup返回一个对象，则对象的属性可以在组件模板中被访问  
> 参数  
> 接收俩个参数

setup.vue

<template>
    	<div>
    		setup
    	</div>
    </template>
    
    <script>
    	export default{
    		setup(){
    			console.log('setup.....')
    		},
    		beforeCreate() {
    			console.log('beforeCreate...')
    		},
    	}
    </script>
    
    <style>
    </style>

app.vue

<template>
    	<comp-setup>
    		
    	</comp-setup>
    </template>
    
    <script>
    /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
    import CompSetup from './components/setupview'
    export default {
      name: 'App',
      components: {
    	  CompSetup,
      }
    }
    </script>
    
    <style>
    
    </style>

![20210826173855802.png][]

接收参数：

setup.vue

<template>
    	<div>
    		{
       { name }}
    		<p>{
       { user.username }}</p>
    	</div>
    </template>
    
    <script>
    	export default{
    		//setup不能访问this
    		//可以接收参数
    		setup(props,context){
    			// console.log('setup.....')
    			//这种返回的数据不具有响应式
    			// let name='tom'
    			// return {
    			// 	name,
    			// }
    			return {
    				name:'tom',
    				user:{
    					username:'admin',
    					password:'123'
    				}
    			}
    		},
    		beforeCreate() {
    			// console.log('beforeCreate...')
    		},
    		props:{
    			msg:String
    		}
    	}
    </script>
    
    <style>
    </style>

app.vue

<template>
    	<comp-setup msg="welcome">
    		
    	</comp-setup>
    </template>
    
    <script>
    /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
    import CompSetup from './components/setupview'
    export default {
      name: 'App',
      components: {
    	  CompSetup,
      }
    }
    </script>
    
    <style>
    
    </style>

[20210826173855802.png]: /images/20220829/871a1aac189e454a8babbbc147ccdc51.png