【笔记】初识vue3.2

相信大家都看过尤大发的<script setup> + TS + Volar = 真香，那么<script setup>是什么呢，那就不得不说vue3.2版本提供的新特性了。

说实话，当知道vue有新特性的时候，我的内心是崩溃的，我想学无止境不应该只是用在工作吧，带着无奈但是又想探索的心情，我开始了vue3.2的学习之旅。

真香。

看过vue3.2的文档，最直观的感觉就是<script>标签上可以加上setup了，看过vue3.x文档的朋友们应该知道，vue3.x与vue2在写法上最大的区别就是vue3.x把很多内容都移至setup函数中了，但是如果模板要使用setup中的变量或是函数的话，需要return出来，这样写起来又繁琐又别扭。但是如果在vue3.2中，就可以跟这样的烦恼，说拜拜。先看一段例子。

<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>

<template>
  {{ msg }}
</template>

在新的语法糖的加持下，msg可以不需要return就可以直接在模板中使用了。
在vue3.2中还有一个让我印象深刻的新特性，就是可以把setup中的变量应用到css中了，依然一段小例子。

<script setup>
import { ref } from 'vue'
const color = ref('blue')
</script>

<template>
  <div class="word-color">文字颜色</div>
</template>

<style>
.word-color {
  color: v-bind(color);
}
</style>

通过v-bind将color的值带到了css里，是不是特别方便。
好了，初识篇想讲到这里了，vue3.2提升了相当多，但是我之后的文章也只会停留在应用层面，相当于开发中遇到的问题或是用法上的笔记整理吧，毕竟水平一般，能力有限，理解万岁~