>[success] # readonly 1. `readonly` 會返回**原生對象的只讀代理**都是不允許修改，它依然是一個`Proxy`，這是一個`proxy`的`set`方法被劫持，并且不能對其進行修改 2. `readonly`支持參數類型 * 普通對象； * `reactive`返回的對象； * `ref`的對象； 3. 在我們傳遞給其他組件數據時，往往希望其他組件使用我們傳遞的內容，但是不允許它們修改時，就可以使用`readonly` >[danger] ##### 案例 [參考](https://sfc.vuejs.org/#eNp9Ul+L00AQ/yrDvrTl2sTn0BP9DL7uSy7d1Nwl2WV3Uy0lICIWRNQDESz4ptUH/5xwCtVy92W6Nj75FZxssu3hgUnI7uz85vebmZ0ZuS2ENykYCchQs0ykoWY3aQ4wPCq05jncitIkOjmkxK6UWCdsH67M/CdYoN8g0TH0r1CgqSKZCG0jkkxwqWEGkoUjnqdT6OMu0smElRBLnkEHs+jUUHbfQkcsDosUQ6wgKKYL0e05EyKeKw1cJuMkD1M4rIktXXeGviLXAdyAslfnQTXVLT7iYtpgbRJdF1/jEIVvwx4XOZJh+bbqbs+pgu/D7weL6nK+l95cfv71ctWI/lk/NWePN+tF9X5pnp9uLt5U3141qtvFo83F0rz4aF5/cGqOw7PBBwcuW6r3Ojb4uob5sq7m5+bt1+r8nVl9N/Mf22dn1aelOX3iOOpIx1wn3ngDoOQOw9YJJkNbI34nbAodC+1AHCYpGwWgQzlGXKJ27fIoaftQWo22JxKvRua7m8HH1dXfH9XJXDXtNLUmsu0W/A393eCQPmkmZ5CFwjtWPMdBtUK0dShKAidNCc5QbVNyV2uhAt9XcVSP97HyuBz7uPMkFplkzGMqGxxJfk8xicSUtMlZDh8PJ0wOJMtHTDL5P85/oNd426JKUv4FWxhOJg==) ~~~html <template> <button @click="click"> 點擊 </button> </template> <script> import { readonly ,reactive} from 'vue' export default { setup() { const original = reactive({ count: 0 }) const copy = readonly(original) function click(){ // 通過 original 修改 count，將會觸發依賴 copy 的偵聽器 original.count++ // 通過 copy 修改 count，將導致失敗并出現警告 copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly." } return { original, copy, click } } } </script> ~~~ >[danger] ##### ref 解包 1. `readonly `也能對`ref `進行解包，原理上和`reactiv `一樣，當ref使用基本類型參數 并且作為`readonly `代理對象`value`時候 ~~~ const raw = { count: ref(123) } const copy = readonly(raw) console.log(raw.count.value) // 123 console.log(copy.count) // 123 ~~~ >[danger] ##### 使用場景 -- 組件傳遞 1. vue 官方建議是數據流保持單向傳遞，**盡可能將任何對響應式狀態的變更都保持在供給方組件中**，為了防止其他人在子組件改變數據就可以使用`readonly` * [案例](https://sfc.vuejs.org/#eNqtU8Fu00AQ/ZWRL3aVxIar5URFfAAHjpiD42wSp/Z6tV4HIssS4kAkhJCQOHEGbkCRKqRApf4MpuHELzC7a29dUvVEFNne2Zk3b2beVNY9xtx1SSzfCgTJWBoJMgkpQHB/maQzTigcx8uILsg4tPRHaIGf82SR0CiVxpxtQmsSeF0AhgdeDwuPRcwTJhRukrGcC6iAk2iW03QDQ/yKRbImNcx5noGNdOyeqyGib12TSPJWjuSpcpyReVSmiC1tAHGO8ZRQUfitBQzWUBvq9l0QUTLnqIvEUFoI6IqEsSSrKDoV3pVU+HAH6iNZWyhC0frLTmhfVZjTxUs/6TUvKYLkFHQfnTVeGWZg0rkqAwzGeN/e1p0XR6KcGp69qLYSzZ5t+kc9tfbcQqkXPgLPzMYaWrrjoyxi7qrIKYpCZQrbiyK0/C53aGH35Tm0lkKwwve8Yh7LkawKN+cLD79cjoUkGXFJkY2mPH9SEI7AodWyUxgeGteEj3AqM8IJvw3zH9cD3LaoGkvpi+RQ3NNSCBzEcZwm8YkUsXyjihWvy+e7ZvsDqqrrba26FXg66r/p+2bZMp5j5WbCHYcrC4DYMOI/mK5ILMycQ9Hi+M7ReOJUUp3XJ966kiwR/iNbq8J+fG0DVO5hJV1quQ2oWoNvsl/JWDbN6UsYwPPg97N3+4ut3oafF59/vd3pnflz/qo5fdF8Od9vz5r3X/dnH5rdt2b7/fL16f7Tx+bNyz6OYqI3YTCQqNpFSuMhwdVkhEeKBP5PyAZs5WrDPEpSMvNBRHyBfklh5uBqeXQ/WaPTdWF413RL9cscDvetNxHN8YYFxJ1TeuoMt+xc/RcLQN8U) * 父組件 ~~~html <template> <Children @change="change" :original="copy"></Children> </template> <script> import { readonly ,reactive} from 'vue' import Children from './Children.vue' export default { components:{ Children, }, setup() { const original = reactive({ count: 0 }) const copy = readonly(original) function change(val){ original.count +=val } return { original, copy, change } } } </script> ~~~ * 子組件 ~~~html <template> <button @click="click"> 點擊 {{original}} </button> </template> <script> import { readonly ,reactive} from 'vue' export default { props:{ original:{ type:Object, default:()=>({}) } }, emit:['change'], setup(props,{emit}) { function click(){ // 通過 copy 修改 count，將導致失敗并出現警告 props.count++ // 警告: "Set operation on key 'count' failed: target is readonly." emit('change',1) } return { original:props.original, click } } } </script> ~~~ >[danger] ##### 官方參考 [## readonly](https://cn.vuejs.org/api/reactivity-core.html#readonly) [## 和響應式數據配合使用 provide 看這個](https://cn.vuejs.org/guide/components/provide-inject.html#working-with-reactivity)