Skip to content
This repository was archived by the owner on May 25, 2024. It is now read-only.

fix: remove reactivity incorrect explaination #266

Merged
merged 1 commit into from
Apr 28, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 0 additions & 58 deletions packages/docs/src/rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -475,61 +475,3 @@ body {
```

これで、商品を 1 つレンダリングできました。

<PlusOne />

## 商品の内容を変更

商品の内容を変更し、表示に反映されることを確認してみましょう。商品名 `name`、概要文 `description`、価格 `price` をそれぞれ適当に変更します。

変更前(script)

```vue
<script setup lang="ts">
import { ref } from 'vue'

interface Item {
id: number
name: string
description: string
price: number
image: string
}

const item = ref<Item>({
id: 1,
name: 'アボカドディップバケット',
description:
'刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
price: 480,
image: '/images/item1.jpg'
})
</script>
```

変更後(script)

```vue
<script setup lang="ts">
import { ref } from 'vue'

interface Item {
id: number
name: string
description: string
price: number
image: string
}

const item = ref<Item>({
id: 1,
name: 'アボカドソースバケット',
description:
'刻んだ野菜をアボカドと混ぜ、優しい味のソースに。こんがり焼いたバゲットとお召し上がりください。',
price: 320,
image: '/images/item1.jpg'
})
</script>
```

このようにデータを更新したとき、自動的に表示が更新される状態のことを、「リアクティブ」と言います。
Loading