根據檔案，原語在使用reactive包裝器時不應該變得被動，這就是為什么在這種情況下我們應該使用ref. 同樣的情況是當我們想要重新分配整個物件而不是改變它時。
我的問題是為什么在下面的片段中counter2，state2.counter當我們取消注釋注釋行時開始正常作業？
<script setup>
import { ref, reactive } from 'vue';
let counter1 = ref(0);
let counter2 = reactive(0);
const increment = () => {
// counter1.value ;
counter2 ;
}
</script>
<template>
<h3>counter1 {{ counter1 }}</h3>
<h3>counter2 {{ counter2 }}</h3>
<button @click="increment">increment</button>
</template>
游樂場：鏈接
<script setup>
import { ref, reactive } from 'vue';
let state1 = ref({ counter: 0 });
let state2 = reactive({ counter: 0 });
const increment = () => {
// state1.value = { counter: state1.value.counter 1 };
state2 = { counter: state2.counter 1 };
}
</script>
<template>
<h3>counter1 {{ state1.counter }}</h3>
<h3>counter2 {{ state2.counter }}</h3>
<button @click="increment">increment</button>
</template>
游樂場：鏈接
uj5u.com熱心網友回復：
Vue 檢測到突變counter1并重新渲染包含更新值的整個組件。由于更改counter2為. 單獨的變異不會觸發渲染，因為它不是反應性的。counter2counter1counter2
uj5u.com熱心網友回復：
你應該堅持使用 ref 來擁有一個反應型別，甚至指定它，因為只為計數器創建一個物件是沒有意義的。您可以在使用const counter = ref<int>(0)value 時使用，而不必使用 let ，在腳本中訪問時只需使用 counter.value 和 HTML {{ counter }}。使用 ref 您可以創建一個回應式原始值，同時使用回應式用于創建回應式物件，它可以替代資料。因此，只需使用 ref，因為它幾乎可以用于您甚至可以創建自己的型別并指定它們的所有內容。此外，當使用回應式時，您不能交換完整的物件，并且它不能用于所有另一方面 ref 唯一的缺點是 .value 可能很煩人，但最終，這是值得的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446456.html
標籤：javascript Vue.js 反应式 参考
上一篇：我如何使用vue.js將API陣列顯示為使用axios的引導卡
下一篇：在python中安裝任何包時出錯