当前位置：首页 > news >正文

Vue3中的setup

news 2025/7/4 18:57:15

<!-- 这是一个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>