【vue3】基础知识点-setup语法糖

花椒和蕊2023-08-09 22:46

学习vue3，都会从基础知识点学起。了解setup函数，ref，recative，watch、comptued、pinia等如何使用

今天说vue3组合式api，setup函数

在学习过程中一开始接触到的是这样的，定义数据且都要通过return返回

bash 复制代码

<script>
export default {
setup(){
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
return {
message,
logMessage
}
}
}
</script>

最新接触到的是这样的

bash 复制代码

<script setup>
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
</script>

两种不同的写法，那区别是什么呢？

其实在script标签上直接加setup就是语法糖写法

语法糖写法，简单理解就是经过一定的封装，将之前复杂的写法变成一个简单的写法

原先的export default 、setup(){} ,return 都不需要写了

官方提供了一个工具，可以在线看实际运行后的代码

戳这里，跳转到vue SFC Playground官方工具

看右侧实际运行的代码，是同之前的复杂写法的。在底层运行的时候还是一开始的复杂写法，只是通过封装，提供给我们一个简单的写法，这就是语法糖的意义。