import { reactive, markRaw, toRefs } from 'vue';
// 創(chuàng)建一個普通的 JavaScript 對象
const rawObject = {
  name: 'Raw Object',
  value: 'This is a raw object and it will not be reactive.'
};
// 使用 markRaw 標(biāo)記這個對象，使其保持原樣
const markedRawObject = markRaw(rawObject);
// 創(chuàng)建一個響應(yīng)性對象
const state = reactive({
  // 將標(biāo)記過的 rawObject 放入響應(yīng)性對象中
  markedRawObject,
  // 另一個普通的對象，它會被轉(zhuǎn)換為響應(yīng)性對象
  reactiveObject: {
    name: 'Reactive Object',
    value: 'This is a reactive object and it will track changes.'
  }
});
// 在組件中使用這些對象
export default {
  setup() {
    // 使用 toRefs 來解構(gòu)響應(yīng)性對象的屬性，以便在模板中直接使用
    const { markedRawObject, reactiveObject } = toRefs(state);
    // 由于 markedRawObject 是被 markRaw 標(biāo)記過的，修改它不會觸發(fā) Vue 的響應(yīng)性系統(tǒng)
    markedRawObject.value.name = 'Modified Raw Object'; // 這不會觸發(fā)更新
    // 修改 reactiveObject 則會觸發(fā) Vue 的響應(yīng)性更新
    reactiveObject.value.name = 'Modified Reactive Object'; // 這會觸發(fā)更新
    // 返回這些屬性，以便在模板中使用
    return {
      markedRawObject,
      reactiveObject
    };
  }
};

<template>
  <div>
    <p>Marked Raw Object: {{ markedRawObject.name }} - {{ markedRawObject.value }}</p>
    <p>Reactive Object: {{ reactiveObject.name }} - {{ reactiveObject.value }}</p>
  </div>
</template>