Vue3.2有哪些新特性

本篇內容介紹了“Vue3.2有哪些新特性”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

<script setup> 是一種編譯時語法糖，可在 SFC 內使用 Composition API 時**極大地改善工作效率。

第二個：新增<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有哪些新特性”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！