这段时间团队的小伙伴写了一个小项目前端用的是vue3+ts, 后端用的php,但前端虽然用的是vue3但还是没有用vue3 setup语法糖,写法没到达到极致,争取下一个项目用上vue3的setup语法糖,这样更省事,今天就来一起学一学vue3的setup语法糖,看看它有那些优点:
VUE3版本变更説明:
1、起初 Vue3.0 版本暴露变量必须 return 出来,template中才能使用。
2、现在在 vue3.2 版本只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得
原来旧版的写法:
<template>
{{msg}}
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const msg = ref("Hello Word!!!")
return {
msg
};
}
}
</script>
用vue3 setup语法糖的写法:
<template>
{{msg}}
</template>
<script setup>
import { ref } from "vue";
const msg = ref("Hello Word!!!")
</script>
setup script 语法更加简洁,属性和方法不需要返回暴露出去,template模板中就可以直接使用
这个语法糖在2021年6月29日的vue3版本正式支持了,有兴趣的同学快去试试吧,我们的下一个项目的也会改成这种写法,这样就更优雅,简洁