Vue3中的setup

<!-- 这是一个vue3 --> <template> <div class="person"> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">年龄+1</button> <button @click="showTel">点我查看联系方式</button> </div> </template> <script lang="ts"> import {ref} from 'vue' export default { name:"Person", beforeCreate() { console.log("beforeCreate"); }, setup(){ console.log(this); console.log("setup"); // 变量定义,使用ref 关键字来定义响应式数据 let name = ref('张珊'); let age= ref(18); // 函数定义 function changeName(){ name.value='李思' } function changeAge(){ age.value+=1; } function showTel(){ alert("15823645923"); } // 通过return 返回所有可以在template中可以处理的数据 return { name,age,changeName,changeAge,showTel} } } </script> <style scoped> .person { background-color: skyblue; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>

vue3组合式api的入口 .这是vue3中新的配置项 ,可以在setup这个配置项中配置所有想要的东西,如变量 函数 监视器setup这个配置项会优于beforeCreate这个钩子函数,而beforeCreate钩子函数是用来初始化vue实例的,因此setup不会指向vue实例,因此setup中就没有this关键字setup的返回值通常是一个对象,会将所有需要暴露的数据通过自定义的形式返回出去

上述代码可以使用setup语法糖的方式重构,这样做的好处,是可以避免页面中处理的数据过多,需要一个个定义返回值得情形.这两种方式是等价的,一般建议使用setup 语法糖 setup 语法糖（script setup）的方式

<!-- setup 语法糖,可以避免数据多时,需要手动的return. 等价于上面一种写法 --> <script lang="ts" setup > import {ref} from 'vue' let name = ref('张珊'); let age= ref(18); // 函数定义 function changeName(){ name.value='李思' } function changeAge(){ age.value+=1; } function showTel(){ alert("15823645923"); } </script>