vue3+ts setup 基本使用

 1 <template>
 2   <div class="hello">
 3     <div>
 4       <h2>欢迎光临呱呱的小店</h2>
 5       <div>请选择你喜欢的服务员</div>
 6     </div>
 7     <div>
 8       <button
 9         v-for="(item, index) in girls"
10         :key="index"
11         @click="girlsnumFun(index)"
12       >
13         {{ item }}
14       </button>
15     </div>
16     <div>当前选择的是 【{{ girlsnum }}】</div>
17   </div>
18 </template>

 1 <script lang="ts">
 2 import { defineComponent, ref } from "vue";
 3 export default defineComponent({
 4   name: "hello",
 5   setup() {
 6     const girls = ref(["服务员1", "服务员2", "服务员3"]);
 7     const girlsnum = ref(‘‘);
 8     const girlsnumFun = (item: number) => {
 9       girlsnum.value = girls.value[item];
10     };
11     return {
12       girls,
13       girlsnum,
14       girlsnumFun,
15     };
16   },
17 });
18 </script>

 1 import { h, ref, reactive } from ‘vue‘
 2 
 3 export default {
 4   setup() {
 5     const count = ref(0)
 6     const object = reactive({ foo: ‘bar‘ })
 7 
 8     return () => h(‘div‘, [count.value, object.foo])
 9   },
10 }

1 export default {
2   props: {
3     name: String,
4   },
5   setup(props) {
6     console.log(props.name)
7   },
8 }

 1 export default {
 2   props: {
 3     name: String,
 4   },
 5   setup(props) {
 6     watchEffect(() => {
 7       console.log(`name is: ` + props.name)
 8     })
 9   },
10 }

 1 interface Data {
 2   [key: string]: unknown
 3 }
 4 
 5 interface SetupContext {
 6   attrs: Data
 7   slots: Slots
 8   emit: (event: string, ...args: unknown[]) => void
 9 }
10 
11 function setup(props: Data, context: SetupContext): Data

const arr = reactive([ref(0)])
// 这里需要 .value
console.log(arr[0].value)

const map = reactive(new Map([[‘foo‘, ref(0)]]))
// 这里需要 .value
console.log(map.get(‘foo‘).value)

1 interface Ref<T> {
2   value: T
3 }
4 
5 function ref<T>(value: T): Ref<T>

const foo = ref<string | number>(‘foo‘) // foo 的类型: Ref<string | number>

foo.value = 123 // 能够通过！