vue3.2版本新特性

Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。
Vue 3.2 原文链接

主要更新如下：

1. 新的单文件组件功能

<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。
<style> v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style>

起初 vue3.0 暴露变量必须 return 出来，template中才能使用

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
  setup (props) {
  	console.log(props)
  	return {
  	  ok: Math.random(),
  	  Foo,
  	  Bar
  	}
  }
}
</script>

vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下是 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

<template>
  <Foo/>
  <Bar/>
  <component :is="ok ? Foo : Bar"/>
</template>

<script setup="props">
export { default as Foo } from './Foo.vue'
export { default as Bar } from './Bar.vue'
export const ok = Math.random()
console.log(props)
</script>

其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。

style v-bind 使用如下：

<template> 
	<button @click="color = color === 'red' ? 'green&