setup 语法糖在书写上更加方便简洁,可以直接在 script 标签中书写 setup 的内容,并且无需使用 return 返回。
基础使用:
<script setup>
</script>
注:setup 语法糖中不能存在 `export default {}` ,否则会报错的。
特性一:定义响应式数据:
<template>
<h3>{{ sum }}</h3>
<h3>{{ info.name }} : {{ info.age }}</h3>
</template>
<script setup>
// 引入 reactive 和 ref 函数
import { reactive, ref } from "vue";
// 创建 ref 数据
let sum = ref(0);
// 创建 reactive 数据
let info = reactive({ name: "张三", age: 18 });
</script>
注:在 setup 语法糖中定义的数据,可以直接在 template 标签中使用。
特性二:定义方法与计算属性:
<template>
<h3>{{ sum }}</h3>
<p>价格:¥{{ price }}</p>
<button @click="add()">点击+1</button>
</template>
<script setup>
// 引入 computed 和 ref 函数
import { computed, ref } from "vue";
// 创建 ref 数据
let sum = ref(0);
// 创建方法
let add = () => {
sum.value++;
}
// 创建计算属性
let price = computed(() => {
return sum.value.toFixed(2);
})
</script>
注:在 setup 语法糖中定义的方法、计算属性等,都可以直接在 template 标签中使用。
特性三:引入组件:
<template>
<h3>我是父组件</h3>
<hr />
<Child></Child>
</template>
<script setup>
// 引入组件
import Child from '../components/Child';
</script>
注:在 setup 语法糖中通过 import 引入的内容,也可以直接在 template 标签中使用。
原创作者:吴小糖
创作时间:2023-10-09