去官網學習→組合式 API：setup() | Vue.js

運行示例：

?代碼：App.vue

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><!--  msg 組件傳遞數據 --><HelloWorld msg="vue setup()新特性 "/></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',components: {HelloWorld}
}
</script>

?代碼：HelloWorld.vue

<template><h2>Vue3 setup新特性</h2><p>{{msgs}}</p><p>{{cont}}</p><p v-for="(item,index) in names.list" :key="index">{{ item }}</p><button @click="clickBtn">點擊事件</button><p>{{msg}}</p><p>父組件傳遞過來的數據-》{{ superData }}</p>
</template><script>
//需要什么就引用啥
import { ref,reactive, onMounted, onBeforeMount, onBeforeUpdate,onUpdated, onBeforeUnmount, onUnmounted,inject } from 'vue'; export default {name: 'HelloWorld',props:{msg:String,default:"默認值"},data(){return{msgs :"消息"}},//組合式API   setup 中沒有thissetup(props,context){//Proxyconsole.log(props);// Setup 上下文對象console.log(context);//refconst cont = ref("這是內容");//reactiveconst names = reactive({list:["admin","user","tom"]});//方法function clickBtn(){//alert("點擊事件");//.valuecont.value = "修改后的數據----"}//props 組件傳遞數據const msg = props.msg//setup 生命周期  可以調用多次onMounted(() =>{console.log("------onMounted渲染完成------");});onBeforeMount(() =>{console.log("------onMounted渲染之前------");});//beforeUpdateonBeforeUpdate(() =>{console.log("------onBeforeUpdate更新之前------");});onUpdated(() =>{console.log("------onUpdated更新完成------");});onBeforeUnmount(() =>{console.log("------onBeforeUnmount卸載之前------");});onUnmounted(() =>{console.log("------onUnmounted卸載完成------");});// inject("key") 子組件接收父組件數據const superData = inject("superMsg");//returnreturn{cont,names,clickBtn,msg,superData}}}
</script>