>[success] # ref 1. 接受一個內部值并返回一個響應式且可變的 `ref `對象，`ref()` 返回的是**value reference （包裝對象）** 并且這個對象`value`屬性指**向包裝的值讓其具備了響應** * 數據操作的是使用是`xxx.value` * 在模板中引入`ref`的值時，Vue會自動幫助我們進行**解包操作**，所以我們并不需要在模板中通過 `ref.value` 的方式來使用 3. 一般定義基本類型的響應事數據使用`ref `常見的基本類型，如果你綁定的是對象他將會調用`reactive `，此時`.value`返回的是一個`proxy`對象， 4. 為什么具有`value `因為`proxy `不能將基本類型進行劫持和代理，因此將其轉換為對象，進行劫持代理，如果包裹是對象類型做了一層`reactive`包裹 >[danger] ##### 案例 ~~~html <template> <div > <button @click="print">觸發事件</button> {{str}} <input v-model="str" /> </div> </template> <script> import {ref} from 'vue' export default { name: 'testlison', setup(prop, ctx) { const str = ref('z') const num = ref(1) const boolean = ref(false) const ull = ref(null) const un = ref(undefined) const print = ()=>{ str.value = "q" num.value = 100 boolean.value = true ull.value = {name:'zz'} un.value = 1000 } return { str,print} }, } </script> ~~~ >[danger] ##### 解構 [案例](https://sfc.vuejs.org/#eNp9U21rE0EQ/ivDfmkCyR1VQQ2Xov9jv1wum/Zq7oW9vUQ4DvyQFsRqhJYarRbaChVE4xvFaOuv6Z3xk3/B2d3kkrMiB3uzs888M8/sbELuhqHRixlpEEswL+zagq1RH8Bquz1lgNWKhQh8uON0XedekxJnw/bXGSVr+d4kG44sUwMQTYUKgySxDd/2WJpaZsGjKfGsZThB7AujZ3fjEmRuWeZSKbiNHO6GQkFcLwy4gAQ469Q4sx3h9hik0OGBBysoZEWi2H2FarOOHXcRrfNHTMRhpTrfAjiBHwmwoSnZKpDIkhuU9Pt9SlKolmEthCVoY+XQUAGrVUilZvl1Yh9LwS7p5lSqRRIA04TsYhcjINvZmp5M8tE4G0+mH4/yZ2fZg+fZ1ln2/nDmGY2nx2/nujT89/nO5ddHv14dT09P8sOB63eCMreKx0gsSsdVykoKIXMpCajWNyQV9q4J9gIhferu0E3J6rXrNyhZnJYS5+9eowJdVfb0yc8XA90dqW/3cfZtLzsfolMJV+qkkovt6el2dvAj/3SUv3yYH3zJ9z+UWT+/yQdDTVB06vL7vhR4VYjOKDW0lg/1eMVdreLmrdv/EpEW1vzPcUK4vxgQALu2sFtLtr7mwoFzsESkV+XDxTKL+SU1oge47tmhsRkFPr47lY3ODiJKGvP8lOA8yz0lG0KEUcM0o44jX+tmZAR83UTL4CjV9ZjBIq/e4kE/YhyJKZmVpjhMdPYYr3Pmtxln/H+cf0Gv8M5EpST9A7P1k04=)，如果將一個對象賦值給 ref，那么這個對象將通過[reactive()](https://cn.vuejs.org/api/reactivity-core.html#reactive)轉為具有深層次響應式的對象 ~~~html <template> <div> <button @click="change">改變</button> <div> {{a.name}}</div> <div> {{b.count.value}}</div> </div> </template> <script> import { ref,reactive } from 'vue' export default { setup() { const a = ref( {name:"www"} ) const b = { count : ref(1) } function change(){ // 當ref 包裹是對象時候其實對象是被reactive包裹，下面解構info // 其實是 reactive({name:"www"})，視圖會更新 const { value:info } = a info.name = "1234" // 此時解構后的count 是響應式的ref 對象，但視圖沒有更新 // 注意響應是對象他是 const { count } = b count.vaule = "789" } return { a, b, change, } } } </script> ~~~ * 官方一個例子，`ref `被傳遞給函數或是從一般對象上被解構時，不會丟失響應性，解構后他 依舊是一個`ref `的響應式的對象，需要通過`value `賦值 ~~~ const obj = { foo: ref(1), bar: ref(2) } // 該函數接收一個 ref // 需要通過 .value 取值 // 但它會保持響應性 callSomeFunction(obj.foo) // 仍然是響應式的 const { foo, bar } = obj ~~~ >[danger] ##### 是所有情況下ref 在模板渲染時候都不用.value么 1. 只有當`ref`包裹的對象是直接從`setup`返回的可以省略`value`,但是如果是嵌套的**依然需要你在模板中使用value屬性**  [案例](https://sfc.vuejs.org/#eNqNU01v00AQ/SvLXpqosc05ciM4cuHA2RfXmYBLbK9216Yo8oEDiEMLBxKpqEUQoopIUCoEhyQS6p/xR34G6107cROCuHh3Zp7fe7OzO8D3CdGjEHAbmxw80rc5dCwfIbPrRnIjtnc0DWXTcfbhZvllkp68TGan+XAa2f0QkKZVKEZsvzMYICcIfY7i2DRkpqwehpwHPrrn9F3n6YGFFWp/38KdB75DwQMRyqRpKGxdPT3/lMwW6h8KvfR6vvwxXn7+mixOsm9jYWk5macXUx8Yh24yuxL4/OJFPrpUJtN3p+limA3n6duz7Oxa+v+YjV7X3BcqWyYVn17z+lBm0C7LG4TZ1SQff09fvc9+jtalHSdSF9OV7/+R3MFGaHD8/FHdOgXb4W4ESA2xRiDnbaiBm0btGoiQOdQlXKq4HgkoR4NiAq0VW4x6NPDQnrhEewUKjiWqCz077Au08seAh6TRrEIkmvBZ2Qo6KBgbd5tVrVoNA+Xnv7I3l8nvG3Hh1NRvE6hDEwwr4qIiSKsw/gupolt1oK7PbV51fNKZQjV2CjRX1GuJakdF29TfMtdax6qBWkIpb9iXi/iIN1XNA7ewGojm2UQ/YoEv3rAUssoCs3C7krawmE8RW/gJ54S1DYP1nOLlHzE9oI8NsdOpsOZ6oAPztEMaPGNABbGFS3eSwxDJCKhGwe8CBfovzg3oFm/ZVIzjP94Ko3Y=) ~~~html <template> <div> <!-- 模板解包不用value --> <span>{{ count }}</span> <button @click="count ++">Increment count</button> <!-- 因為count ref對象被二次包裹在nested中因省略value 響應改變是不生效 --> <!-- <button @click="nested.count ++">Nested Increment count</button> --> <!-- 正確寫法 --> <button @click="nested.count.value ++">Nested Increment count</button> <button @click="proxyR.count ++">reactive 解包</button> </div> </template> <script> import { ref,reactive } from 'vue' export default { setup() { const count = ref(0) // 直接使用對象 const nested = { count } // 使用reactive 包裹 const proxyR = reactive({ count }) // return { count, nested, proxyR } } } </script> ~~~ >[danger] ##### 注意點作為對象參數 1. **當一個包裝對象被作為另一個響應式對象的（屬性）引用的時候也會被自動展開** 但是當從數組或本地集合類型(如Map)訪問ref時，不會執行展開操作 ~~~ const books = reactive([ref('Vue 3 Guide')]) // need .value here 這里依舊需要value console.log(books[0].value) const map = reactive(new Map([['count', ref(0)]])) // need .value here 這里依舊需要value console.log(map.get('count').value) // 反復包裹 let obj = ref({ name: 'w' }) console.log(obj.value.name) console.log(reactive(obj).value.name) ~~~ >[danger] ##### 解包的api ~~~ 1.reactive 和 readonly 具有相同解包特性 ~~~ >[info] ## 官網 [## ref()](https://cn.vuejs.org/api/reactivity-core.html#ref) [## 用`ref()`定義響應式變量](https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref)