Vue toRefs: Vue での反応性を失わずにプロパティを構造化する

記事ディレクトリ

- Vue toRefs: Vue での反応性を失わずにプロパティを構造化する

Vue 開発では、コンポーネント間でデータを渡すことがよくあります。このとき、Props が重要な役割を果たしました。ただし、プロパティを構造化しようとすると、プロパティデータの応答性が失われる可能性があるという問題が発生する可能性があります。この投稿では、応答性を維持する方法を紹介します。

レスポンシブとは何ですか?

Vue では、応答性は、データの変更をインターフェイスに自動的に更新できるようにするメカニズムです。データがリアクティブである場合、データが変更されると、それに依存する部分は自動的に更新されます。

小道具の解体への挑戦

Vue では、Props を使用すると、親コンポーネントが子コンポーネントにデータを渡すことができます。これらのデータは、分解を通じてサブコンポーネント内で使用できます。ただし、props オブジェクトを直接構造化しようとすると、構造化されたプロパティが応答しなくなる可能性があります。

`toRefs`レスポンシブを使用する

幸いなことに、Vue には、toRefsprops オブジェクトを一連のリアクティブ参照に分解するメソッドが用意されています。こうすることで、構造を解除した後でも、それらのプロパティは応答性を維持します。

以下に例を示します。

<script setup lang="ts">
// 从 Vue 框架中导入 toRefs 函数
import {
    
     toRefs } from 'vue'

// 使用 defineProps 来定义组件的 props，这里定义了两个属性：event（一个对象）和 address（一个字符串）
const props = defineProps<{
      
      
  event: object;
  address: string;
}>();

// 使用 toRefs 函数将 props 对象转换为响应式引用对象
// 这样可以保持 props 中的属性在解构时的响应式
// 这里我们解构出了 address 属性
const {
    
     address } = toRefs(props)
</script>

<template>
  <!-- 在模板中使用 address 属性，Vue 会自动跟踪 address 的变化，并更新视图 -->
  <div>{
    
    {
    
     address }}</div>
</template>

上記のコードでは、メソッドを使用してtoRefsprops オブジェクトを構造化し、それをローカル変数に割り当てました。このようにして、address変数をテンプレートで使用することができ、addressprops の属性が変更されると、テンプレート内の値が自動的に更新されます。

結論は

構造化はプログラミングでは一般的な操作ですが、Vue でプロップを直接構造化すると、応答性が失われる可能性があります。Vue のメソッドを使用するとtoRefs、構造化されたプロパティの応答性を維持しながら、プロップを簡単に構造化できます。

Vue の初心者でも経験豊富な開発者でも、このテクニックをマスターすると、より柔軟で効率的なコードを作成できるようになります。この記事が、反応性を失わずに Vue のプロパティを構造化する方法を理解するのに役立つことを願っています。