<h1 id="heading-readonly">readonly</h1>
為了確保 <code>reactive</code> or <code>ref</code> 所宣告的變數數值可以成功傳遞，但無法被更動時，就可以使用 <code>readonly</code>，<code>readonly</code>經常在跨組件使用共同的 Func 時，經常被使用到，因為能夠大大降低產生 bug 的機會。
當被 readonly 所包覆的數值有人想要改動時，將會在 devtool 顯示 warn 的警告。
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1664458005747/wP0-9rIi_.png" alt="devtool 警告圖示" />
<pre><code class="lang-javascript">const { reactive, readonly } = Vue;
const App = {
 setup() {
 const Num = reactive({ idx: 0 });
 const copyNum = readonly(Num);
 const AddFn = () =&gt; {
 Num.idx++;
 };

 const Test = () =&gt; {
 copyNum.idx++;

 console.log(copyNum);
 };

 return { Num, AddFn, Test };
 },
};
</code></pre>


# readonly

為了確保 `reactive` or `ref` 所宣告的變數數值可以成功傳遞，但無法被更動時，就可以使用 `readonly`，`readonly`經常在跨組件使用共同的 Func 時，經常被使用到，因為能夠大大降低產生 bug 的機會。

當被 readonly 所包覆的數值有人想要改動時，將會在 devtool 顯示 warn 的警告。
![devtool 警告圖示](https://cdn.hashnode.com/res/hashnode/image/upload/v1664458005747/wP0-9rIi_.png)

```javascript
const { reactive, readonly } = Vue;
const App = {
  setup() {
    const Num = reactive({ idx: 0 });
    const copyNum = readonly(Num);
    const AddFn = () => {
      Num.idx++;
    };

    const Test = () => {
      copyNum.idx++;

      console.log(copyNum);
    };

    return { Num, AddFn, Test };
  },
};
```
