Vue3.2重磅更新 -- 使用简单，性能更好，更加智能

官方更新文档：

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md

上图：

 

作者将举出一些认为较重要的更新

一、SFC新特性（动态CSS）

SFC文件中两个新特性由实验性质升为稳定状态：

• <script setup> 提升用户在SFC中使用Composition-api的开发体验

• <style> v-bind style标签中可以使用状态驱动的动态css样式

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<style scoped>
button {
  color: v-bind(color);
}
</style>

二、Web组件

Vue 3.2有一个新 defineCustomElement
方法，可用Vue组件API创建原生自定义组件 - custom elements:

import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
  // 普通Vue组件选项
})
// 页面中注册自定义组件，注册后所有`<my-vue-element>`标签将被处理
customElements.define('my-vue-element', MyVueElement)

三、包含一些对响应式系统做的重要性能优化:

• 更加高效的ref实现 (读取/写入速度提升)

• 依赖收集速度提升

• 减少内存消耗 

四、defineProps和defineEmits不需要额外导入

const props = defineProps({ msg: { type: String, required: true }});

const emit = defineEmits(['my-click'])

 五、setup 介绍：（重要）

以往的Vue3写法需要在script标签将vue暴露出来

<script>
import { xxx } from 'vue'
export default {
	name: 'xxx',
	setup() {
        
        return{

        }
	}
}
</script>

每次都需要写export，setup，return这些，组件一多就会有些繁琐，并不友好。

V3.2只需在script标签中添加setup，即可智能化导入和导出引用。

配合ts简直牛

（1）不需要暴露，不用写name属性

（2）引用组件不需要在注册

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Son></Son>
		<hr>
		<my-component></my-component>
	</div>
</template>

<script setup>
import Son from './components/Son.vue'
import MyComponent from './components/MyComponent.vue';
</script>

<style scoped>
.app {
	background-color: #c47676;
	padding: 20px;
}
</style>

 <Son></Son>        可以写成son

<MyComponent></MyComponent>       

多个单词组成可以写成My-Component        my-component        myComponent

但是不能写成mycomponent

（3）变量、方法不需要 return 出来

<template>
	<div class="app">
		<h3>我是App组件</h3>
		{{ num }}
		<br>
		{{ sumAdd([1,2,3,4]) }}
	</div>
</template>

<script setup>
let num = 0

function sumAdd(arr) {
	let Tsum = 0
	arr.forEach(element => {
		Tsum += element
	});
	return Tsum
}
</script>

<style scoped>
.app {
	background-color: #c47676;
	padding: 20px;
}
</style>

效果： 

（4） 新增指令 v-memo

(以下摘自官方)

        缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：

1 2 3

<div v-memo="[valueA, valueB]">   ... </div>

        当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 <div> 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

        正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

作者认为可以提高渲染的性能上（对节点打上标记），对新老进行比较，将没有改变的节点或者DOM跳过重新渲染