＜script setup＞语法糖（小例子）

原创于 2023-10-26 10:23:43 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

文章比较了Vue3中传统写法与ScriptSetup的简洁语法，展示了如何使用`<scriptsetup>`标签简化组件内的数据和函数定义，提高代码可读性。

原始复杂写法：

<script>
export default{
    setup(){
    //数据
    const message = 'this is message'
    //函数
    const logMessage = () => {
        console.log(message)
    }
    return{
        message,
        logMessage
        }
    }
}
</script>

语法糖写法:

<script setup>
//数据
const message = 'this is message'
//函数
const logMessage = () =>{
    console.log(message)
}
</script>

写法更简洁，清晰