Vue 3.5 アップデートについて #4
Comments
はじめに2024年9月1日に Vue 3.5 がリリースされました。 この記事では、Vue 3.5 の主な機能改善・追加とその背景について解説します。 https://blog.vuejs.org/posts/vue-3-5 主な機能改善・追加
|
Reactive Props Destructure の安定化
より詳細な内部実装を知りたい方は以下の記事を参照してください。 https://zenn.dev/comm_vue_nuxt/articles/reactive-props-destructure RFC使用例以前の書き方：<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(defineProps<{
count?: number
}>(), {
count: 0
})
const double = computed(() => props.count * 2)
</script>
<template>
<div>Count: {{ props.count }}</div>
<div>Double: {{ double }}</div>
</template>Vue 3.5 以降：<script setup lang="ts">
import { computed } from 'vue'
const { count = 0 } = defineProps<{
count?: number
}>()
const double = computed(() => count * 2)
</script>
<template>
<div>Count: {{ count }}</div>
<div>Double: {{ double }}</div>
</template>この新しい書き方では、 内部的な動作の変化Vue 3.5の新機能により、コンパイル後のコードにも変更が加えられています。以下に、コンパイル前後のコードの違いを示します。 Reactive Props Destructure 以前入力： <script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
count?: number
}>()
const double = computed(() => props.count * 2)
</script>
<template>
<div>Count: {{ count }}</div>
<div>Double: {{ double }}</div>
</template>出力（一部抜粋）： const __sfc__ = /*#__PURE__*/_defineComponent({
// ...
setup(__props, { expose: __expose }) {
__expose();
const props = __props
const double = computed(() => props.count * 2)
const __returned__ = { props, double }
// ...
return __returned__
}
});Reactive Props Destructure 以降入力： <script setup lang="ts">
import { computed } from 'vue'
const { count = 0 } = defineProps<{
count?: number
}>()
const double = computed(() => count * 2)
</script>
<template>
<div>Count: {{ count }}</div>
<div>Double: {{ double }}</div>
</template>出力（一部抜粋）： const __sfc__ = /*#__PURE__*/_defineComponent({
// ...
props: {
count: { type: Number, required: false, default: 0 }
},
setup(__props, { expose: __expose }) {
__expose();
const double = computed(() => __props.count * 2)
const __returned__ = { double }
// ...
return __returned__
}
});この変更により、プロパティのデフォルト値がコンポーネントの ただし、RFCで言及されている通り、 <script setup lang="ts">
import { defineProps } from 'vue'
const { count = 0, msg = 'hello' } = defineProps<{
count?: number
message?: string
}>()
// props.count と props.msg の両方がインレイヒントでハイライトされる
console.log(count, msg)
</script> |
SSRの改善Lazy Hydration1. Hydrate on Idle (アイドル時にハイドレーション)
2. Hydrate on Visible (表示時にハイドレーション)
3. Hydrate on Media Query (メディアクエリ一致時にハイドレーション)
4. Hydrate on Interaction (インタラクション時にハイドレーション)
5. Custom Strategy (カスタム戦略)
これらの戦略を適切に使用することで、アプリケーションのパフォーマンスを最適化し、必要なときにのみコンポーネントをハイドレーションすることができます。各戦略は |
useId()
入力： <script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
<form>
<label :for="id">Name:</label>
<!-- <input id="v:0" type="text"> -->
<input :id="id" type="text" />
</form>
</template>出力（一部抜粋）：
/* Analyzed bindings: {
"useId": "setup-const",
"id": "setup-maybe-ref"
} */
setup(__props, { expose: __expose }) {
__expose();
const id = useId()
const __returned__ = { id, useId }
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
return __returned__
}
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("form", null, [
_createElementVNode("label", { for: $setup.id }, "Name:", 8 /* PROPS */, _hoisted_1),
_createElementVNode("input", {
id: $setup.id,
type: "text"
}, null, 8 /* PROPS */, _hoisted_2)
]))
} |
data-allow-mismatchサーバーサイドレンダリング（SSR）とクライアントサイドのハイドレーションの間に発生する可能性のある不一致警告を抑制できる <span data-allow-mismatch>{{ data.toLocaleString() }}</span>また、この属性に値を指定することで、許可する不一致のタイプを制限することもできます。指定可能な値は以下の通りです：
|
Custom Elements の改良Vue 3.5 では、カスタム要素（Custom Elements）の機能が大幅に改善されました。これらの改良により、開発者はより柔軟にカスタム要素を設定し、制御できるようになりました。 主な改善点
新たに導入された
カスタム要素とその環境へのアクセスを容易にする新しいAPIが追加されました：
これらの新APIにより、開発者はシャドウDOMとホスト要素をより効果的に操作できるようになりました。
この機能により、開発者はシャドウDOMの利点とグローバルスコープの柔軟性のバランスを取ることができます。シャドウDOMを使用しない場合、カスタム要素の内部構造は通常のDOM構造として扱われ、外部からのアクセスやスタイリングが可能になります。
nonceは、スクリプトやスタイルシートの実行を制御するためのセキュリティ機能で、特定のリソースが信頼できるソースからのものであることを確認するのに役立ちます。 使用例以下は、これらの新機能を活用したカスタム要素の定義例です： import MyElement from './MyElement.ce.vue'
defineCustomElement(MyElement, {
shadowRoot: false, // シャドウDOMを使用しない
nonce: 'xxx',
configureApp(app) {
app.config.errorHandler = // エラーハンドラーの設定
}
})この例では、シャドウDOMを使用せず、nonceを設定し、アプリケーションレベルのエラーハンドラーを構成しています。シャドウDOMを使用する場合は、 これらの改善により、Vue 3.4でのカスタム要素の使用がより柔軟かつ強力になり、さまざまなユースケースに対応できるようになりました。開発者は、シャドウDOMの利点を活かしつつ、必要に応じてグローバルスコープとの連携も選択できるようになりました。 |
その他の機能追加 |
useTemplateRef()
3.5以前では、静的な この古い方法では、 対照的に、 新しい方法： <script setup>
import { useTemplateRef } from 'vue'
const inputRef = useTemplateRef('input')
</script>
<template>
<input ref="input">
</template>以前の書き方： <script setup lang="ts">
import { ref, onMounted } from 'vue'
const inputRef = ref(null)
onMounted(() => {
// inputRef.value は対応する DOM 要素を参照します
console.log(inputRef.value)
})
</script>
<template>
<input ref="inputRef">
</template> |
Deferred Teleport |
onWatcherCleanup() |
Reactivity System の改善によるパフォーマンス向上 |
The text was updated successfully, but these errors were encountered: