WeakMaps

其中一個(gè)得到改進(jìn)的是在可能的情況下從 Maps 和 Sets 轉(zhuǎn)移到WeakMaps 和WeakSets。

那是什么，為什么這么重要？

如果你在 Maps或 Sets 中存儲(chǔ)東西，你會(huì)對(duì)這些東西做一個(gè)引用。這意味著，只要Map或Set被使用，這個(gè)東西就不會(huì)被垃圾收集器從內(nèi)存中釋放。

通常這是有意義的。但有時(shí)候不是。特別是當(dāng)你寫一些代碼，只是深入到數(shù)據(jù)的正常工作流中。例如，通過在系統(tǒng)中流動(dòng)的數(shù)據(jù)中添加診斷數(shù)據(jù)。

當(dāng)你需要時(shí)，你希望數(shù)據(jù)被釋放，你不希望保留保留數(shù)據(jù)的權(quán)利。

這就是 WeakMaps 和 WeakSets 開始發(fā)揮作用的地方，Vue現(xiàn)在在內(nèi)部更多地使用這些來(lái)防止內(nèi)存泄漏并提高整體性能。

對(duì) contenteditable="plaintext-only" 的支持

我認(rèn)為 contenteditable可以是true或false。但顯然，有第三個(gè)值 "plaintext-only"。

通常，當(dāng)你將參數(shù)設(shè)置為true時(shí)，你也可以編輯格式，粘貼富文本。使用plaintext-only值則不行。

現(xiàn)在的變化是，Vue不會(huì)為HTML規(guī)范中定義的合法值拋出 Typescript 錯(cuò)誤。

延遲加載圖像

再次，這只是對(duì)HTML特性的類型支持。它在3.3.5中被添加，并使你能夠?qū)mg的加載參數(shù)設(shè)置為lazy。

這樣，圖像不會(huì)立即加載，而是當(dāng)你的瀏覽器決定你很快就能看到它時(shí)加載。

這是一個(gè)標(biāo)準(zhǔn)的HTML特性，已經(jīng)存在了一段時(shí)間，但這個(gè)修復(fù)是一個(gè)很好的提醒，用它來(lái)提高應(yīng)用程序的性能。

此版本中還有其他的錯(cuò)誤修復(fù)和性能改進(jìn)。

Vue 3.2.40的新功能

Vue的最新版本，受歡迎的Web框架于2022年9月28日發(fā)布，為開發(fā)者提供了修復(fù)的錯(cuò)誤，為3.3版本做準(zhǔn)備。

錯(cuò)誤地禁用按鈕

上面的代碼說明了按鈕不應(yīng)該被禁用，因?yàn)椤癴alse”在屬性中實(shí)際上是一個(gè)字符串，而不是一個(gè)布爾值。在Vue的最新版本中，它通過檢查屬性的類型來(lái)修復(fù)。

V-on不會(huì)拋出錯(cuò)誤

上面的代碼和類似的最近拋出了錯(cuò)誤，而它們本應(yīng)該正常工作，它也被修復(fù)了。

事件被正確地觸發(fā)

上述代碼并沒有導(dǎo)致 onBlur被調(diào)用，而它應(yīng)該被調(diào)用。動(dòng)態(tài)和靜態(tài)v-on的合并導(dǎo)致這個(gè)bug消失。

修復(fù)了一個(gè)內(nèi)存泄漏

在上述情況下，在dev場(chǎng)景中內(nèi)存沒有被正確清理。它是由于提升的 vnodes不正確地保留了DOM節(jié)點(diǎn)引起的?，F(xiàn)在也修復(fù)了。

這些是最有趣的修復(fù)，在其他一些與SSR有關(guān)的問題也被修復(fù)了，團(tuán)隊(duì)正在大力工作。

Vue 3.2.41-45 的3個(gè)最有趣的錯(cuò)誤修復(fù)

Vue團(tuán)隊(duì)上個(gè)月并沒有休息。剛剛介紹了Vue 3.2.40，現(xiàn)在已經(jīng)有了五個(gè)新的小版本。下面將帶你了解最重要的錯(cuò)誤修復(fù)。

Vue對(duì)奇怪的單文件組件(SFC)拋出錯(cuò)誤

傳遞給單文件組件解析器的代碼沒有 <template>，也沒有<script>。這是有效的HTML代碼，但很有可能傳遞這樣的代碼表示傳遞了錯(cuò)誤的變量?，F(xiàn)在，如果組件不包含<template>或<script>標(biāo)簽，解析器將拋出錯(cuò)誤。

import { parse } from '@vue/compiler-sfc';

const result = parse(`
import a from 'vue'
`);
console.log(result.errors); // []

剝離HTML注釋不會(huì)導(dǎo)致空白被移除

通常，HTML 對(duì)于空白是寬容的。除非它不是，并且布局中斷。不幸的是，這種情況發(fā)生了，其中一個(gè)HTML注釋（如下所示）被剝離，而沒有被替換為空格。這發(fā)生在字符串插值附近?，F(xiàn)在已經(jīng)修復(fù)了。

<template>
    <div class="foo">
        <h1>Message:</h1>
        <!-- A comment explaining the interpolation below -->
        {{ msg }}
    </div>
</template>

可以在CSS中使用內(nèi)聯(lián)注釋

以前，在內(nèi)聯(lián)CSS中添加注釋會(huì)導(dǎo)致下面的CSS規(guī)則停止工作?，F(xiàn)在，你可以不受問題地使用注釋。

<div
    style="
      /* something */
      width: 300px;
      height: 300px;
      background-color: pink;
    "
  ></div>

Vue.js 3.3：優(yōu)秀的DX和10倍速度的構(gòu)建

Vue 推出了 3.3 成為了頭條新聞。我們都知道，Vue實(shí)際上是構(gòu)建web應(yīng)用程序的一種非常快速和高效的方式。它能變得更好嗎？

看起來(lái)可以。新版本放寬了 props 和 emits 類型的規(guī)則，使Typescript開發(fā)者高興。現(xiàn)在，定義 emits 也更容易，不需要樣板文件。為props提供默認(rèn)值現(xiàn)在也很簡(jiǎn)單。

新的 defineModel 使得定義雙向綁定更容易。

使用 defineSlots，我們可以為 slots 定義類型，這是一個(gè)有用的工具，可以很好地記錄代碼，并且易于使用。

使用 defineSlots，我們可以為slots定義類型，這是一個(gè)有用的工具，可以很好地記錄代碼，并且易于使用。

我們還可以享受通用組件。

Vue再次顯示它關(guān)心DX，并且能夠快速并直接地構(gòu)建應(yīng)用程序，而不需要很多線束。

它也關(guān)心性能?，F(xiàn)在從 rollup構(gòu)建中分離類型檢查，ESBuild rolloup依賴都組合到根據(jù)發(fā)布說明的10倍更快的構(gòu)建時(shí)間。

Jest被Vitest替換，意味著現(xiàn)在編寫和執(zhí)行測(cè)試將更容易，更快。

更改類型生成器也有助于更精細(xì)地提高性能。

總的來(lái)說，這是一個(gè)很好的版本，涉及到每個(gè)人都應(yīng)該關(guān)心的兩個(gè)主要問題：簡(jiǎn)化使用和提高性能。

Vue團(tuán)隊(duì)每次發(fā)布都顯示出它是一個(gè)生產(chǎn)項(xiàng)目的有價(jià)值的框架。它彌補(bǔ)了輕巧、快速、但功能強(qiáng)大和強(qiáng)類型庫(kù)之間的差距。

憑借像真正的自動(dòng)導(dǎo)入和快速設(shè)置這樣的強(qiáng)大工具生態(tài)系統(tǒng)，它是現(xiàn)代web應(yīng)用程序的絕佳選擇。