Vue3 --- 语法糖写法与原始写法比较

velpro_!

已于 2023-06-27 23:15:41 修改

阅读量229

点赞数

文章标签：前端 javascript vue.js

于 2023-06-27 23:11:29 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131426938

版权

原始复杂写法：

<script>
export default {
    setup() {
        console.log('111')
        console.log(this)   // undefined
        const message = 'this is message'
        const logMessage = () => {
            console.log(message)
        }
        return {
            message, logMessage
        }
    },
    beforeCreate() {
        console.log('222')
    }
}
</script>
<template>
    <div>{{ message }}</div>
    <button @click="logMessage"></button>
</template>

语法糖写法：

<script setup>
const message = 'this is message'
const logMessage =() =>{
    console.log(message)
}
</script>
<template>
    <div>{{ message }}</div>
    <button @click="logMessage"></button>
</template>

Vue SFC Playground