Vue知识点-setup语法糖

除了在export default里写setup函数，还可以写一个 <script lang='ts' setup>，这样就不需要自己交付所有变量与方法了

<template>
  <div class="person">
    <h1>姓名:{{ name }}</h1>
    <h1>年龄:{{ age }}</h1>
    <!--点击事件用@click -->
    <button @click="changeName">改名</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person"
  // ,setup(){
  // }
}
</script>
<!-- setup 语法糖， 替代在export default里的setup函数-->
<script lang="ts" setup>
let name = "张三"
let age = 18
let tel = "1388888888"

function changeName() {
  console.log("changename start" + name)
  //这里数据已经改了，但是不是响应式的
  name = "zhangsan"
  console.log("changename after" + name)
}

function showTel() {
  alert(tel)
}
</script>
<style>
.person {
  background-color: aqua;
}
</style>