Vue3.2单文件组件setup的语法糖总结

目录

前言

setup语法糖

一、基本用法

二、data和methods

三、计算属性computed

四、监听器watch、watchEffect

五、自定义指令directive

六、import导入的内容可直接使用

七、声明props和emits?

八、父组件获取子组件的数据

?九、provide和inject传值

十、路由useRoute和useRouter

十一、对await异步的支持

十二、nextTick

十三、全局属性globalProperties

十四、生命周期

十五、与普通的script标签一起使用

十六、v-memo新指令

style新特性

一、局部样式

二、深度选择器

三、插槽选择器

四、全局选择器

五、混合使用局部与全局样式

六、支持CSS?Modules

七、与setup一同使用

八、动态 CSS

---

前言

满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。

在vue2.0时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed…选项里，这样编写的代码不便于后期的查阅（查找一个业务逻辑需要在各个选项来回切换）。setup函数的推出就是为了解决这个问题，让新手开发者更容易上手…

setup语法糖

setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vue组件，对于开发者更加友好了；按需引入computed、watch、directive等选项，一个业务逻辑可以集中编写在一起，让代码更加简洁便于浏览。

一、基本用法

只需在里的代码编译成一个setup函数

<script setup>
console.log('hello script setup')
&