Vue3.2已釋出，帶來了這些新特性！

第一個：<script setup> 正式畢業

從一開始學習vue3就注意到了實驗性的<script setup>。因為簡潔的寫法受到許多人追捧（寫過setup(){return{}} 的人都知道），甚至有人說這才是vue3的完全形態。看了更新描述，emmm....官方吐槽最為致命。

第二個：新增<style> v-bind

而<style> v-bind呢，簡單地來說就是可以在內使用元件定義的動態值。官方給出了例子：

import { ref } from 'vue'
const color = ref('red')
</script>
<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>
<style scoped>
button {
  color: v-bind(color);
}
</style>

因為vue中文官網暫時沒有此次的更新內容，需要的同學可能要到外網啃啃英文檔案了。

檔案地址：

https://v3.vuejs.org/api/sfc-script-setup.html

第三個：新增 defineCustomElement方法

Vue 3.2 引入了一個新的 defineCustomElement 方法，可以使用 Vue 元件 API 輕鬆建立原生自定義元素：

import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
  // normal Vue component options here
})
// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

第四個：效能改進

此處有很大篇幅講述3.2版本的效能升級，其中提到了新的指令v-memo，簡單來說這個指令會記住模板樹的一部分，不僅跳過虛擬 DOM 差異，而且完全跳過新 VNode 的建立。可用於複雜的大型頁面。

第五個：伺服器渲染

最後提到了伺服器端渲染與新的Effect Scope API。有興趣的同學可以仔細看一看更新檔案。

blog.vuejs.org/posts/vue-3…

第6個：1024Lab 再說點兒

相信很多同學已經上手開始使用了。在檔案中可以看到，

defineProps、defineEmits、defineExpose、withDefaults屬於compiler macro，編譯器宏。檔案中也說到：

They do not need to be imported, and are compiled away when is processed

他們不需要引入，會在編譯的時候處理掉。

然而不引入你用的時候就會報錯。

<script setup>
const props = defineProps<{
  value?: number;
}>();
const emit = defineEmits<{
  (e: 'update:value', value: number): void;
}>();
</script>

首先eslint會報錯：

ESLint: 'defineEmits' is not defined.(no-undef)

此時你需要更改eslint-plugin-vue的設定

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}

然後可能編譯後瀏覽器控制檯會報錯

defineEmits is not defined

你可能會發現defineEmits等並沒有在編譯的時候處理掉，通過瀏覽器看原始碼defineEmits還在，且畫著紅色波浪線。此時你可能需要檢視package.json中各個包的版本以及vite的版本2.4.x，更新後重試，此時編譯出來的程式碼應該是這樣：

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })

以上就是Vue3.2已釋出，帶來了這些新特性！的詳細內容，更多請關注TW511.COM其它相關文章！