Vue3.2已發布，帶來了這些新功能！

第一個：5101c0cdbdc49998c642c71f6b6410a8 正式畢業

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

5101c0cdbdc49998c642c71f6b6410a8 是一種編譯時語法糖，可在 SFC 內使用 Composition API 時**大大改善工作效率。

第二：新增c9ccee2e6ea535a969eb3f532ad9fe89 v-bind

而c9ccee2e6ea535a969eb3f532ad9fe89 v-bind呢，簡單來說就是可以在內用組件定義的動態值。官方給了例子：

import { ref } from 'vue'
const color = ref('red')
</script>
<template>
  <button @click="color = color === &#39;red&#39; ? &#39;green&#39; : &#39;red&#39;">
    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(&#39;my-vue-element&#39;, 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: &#39;update:value&#39;, 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已發布，帶來了這些新功能！的詳細內容。更多資訊請關注PHP中文網其他相關文章！