Vue3.x -- 響應性API · Vue&&TypeSprict--基礎總結

>[success] # 響應性API ~~~ 1.目前'setup' 的返回對象參數可以直接渲染到模板上，問題是數據不是響應式，想讓數據變成響應式需要使用'3.x' 提供的響應式API ~~~ >[info] ## Ref ~~~ 1.接受一個內部值并返回一個響應式且可變的 ref 對象。ref 對象具有指向內部值的單個 property .value 來理解官方這句話'ref() 返回的是value reference （包裝對象）并且這個對象value屬性指向包裝的值讓其具備了響應' 2.注意第一條說的是'value' 屬性指向了包裝對象并且是value具備了響應 2.1.數據操作的是使用是'xxx.value' 2.2.但在模板中簡化了操作流程因此可以直接'xxx'不需要調用'value' 屬性 3.一般定義基本類型的響應事數據使用'ref' 常見的基本類型'String','Number','BigInt','Boolean','Symbol','Null' 'Undefined' 4.如果你綁定的是對象非上面提出的基本類型他將會調用'reactive '，此時'.value'返回的是一個'proxy' 對象，關于這一點稍后會詳細解釋，現在簡單看一下如果"const per = ref({name:'z'})" 包裹的是對象相對的你的修改你需要'per.value.name = "zz" '依然要通過'value' 并且此時'per.value' 是一個'prxoy'對象 5.注意下面案例中其實我們使用const定義參數也間接想表達'ref'包裹的基礎類型已經是一個對象（是一個ref對象） ~~~ >[danger] ##### 案例 ~~~ <template> <div > <button @click="print">觸發事件</button> {{str}} <input v-model="str" /> </div> </template> <script> import {ref,reactive} 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} }, ~~~ >[danger] ##### 是所有情況下ref 在模板渲染時候都不用.value么 ~~~ 1.答案是否定的，只有當'ref'包裹的對象是直接從setup返回的可以省略'value',但是如果是嵌套的依然需要你在模板中使用value屬性 ~~~ ~~~html <template> <div> <span>{{ count }}</span> <button @click="count ++">Increment count</button>    <button @click="nested.count.value ++">Nested Increment count</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) return { count, nested: { count } } } } </script> ~~~ >[info] ## reactive ~~~ 1.'reactive' 返回對象的響應式副本,并且他響應轉換是'深層'的它影響所有嵌套 property,基于'Proxy'實現，和 '2.x' 的 Vue.observable()等同 2.解釋上面官方的話 2.1.定義對象時候要使用我并且會返回一個'proxy'對象這個對象具有響應式 2.2.'深層'就是這個對象內部嵌套多深所有嵌套的屬性都能影響到舉個例子 "const obj =reactive( {name:'ww',per:{age:1100}})" 從obj的name屬性到per甚至你的per.age屬性都能被我代理了并且無論你是delete刪除還是說新增新的屬性都可以被響應到，'reactive'的返回的'proxy'對象可以被響應,如果你操作原對象不享受這個待遇 2.3.內部基于 ES6 的 Proxy 實現，通過代理對象操作源對象內部數據都是響應式的 3.現在可以在進一步理解'ref' 如果傳值是對象內部會調用'reactive' 這一點了(注意說的是ref對對象會內部自動調用'reactive') 4.當你從組件中的data()返回一個對象時，它是由reactive()在內部做出反應的 ~~~ >[danger] ##### 案例 ~~~ <template> <div > <button @click="print">觸發事件</button> {{proxyObj.count}} {{proxyObj.name}} </div> </template> <script> import {ref,reactive} from 'vue' export default { name: 'testlison', setup(prop, ctx) { // 要注意了你直接操作obj 是沒有響應效果 const obj = {count:0} // 你需操作我我是響應的 const proxyObj = reactive(obj) const print = ()=>{ proxyObj.count ++ // 感動了吧以前你還需要$set 現在不用了 proxyObj.name = "ww" } return { proxyObj,print} }, } </script> <style scoped lang="less"></style> ~~~ >[danger] reactive 包裹一個對象包含ref的對象 -- Ref Unwrapping（包裝對象的自動展開） ~~~ 1.當一個ref作為一個響應式對象的屬性被訪問或改變時，它會自動打開內部值，這樣它的行為就像一個普通的屬性簡單的說'當一個包裝對象被作為另一個響應式對象的（屬性）引用的時候也會被自動展開' 2.理解官方這句話就是現在我定義了一個ref對象，'const count =ref(0)' =>我將ref對象做一個對象的屬性 'const obj = {count}'=>此時我使用是'obj.count.value' 但是如果我用reactive 包裹著含有ref屬性的對象即 'const state = reactive(obj)' 他會自動將這個value給打開使用效果變成'state.count'不用再加value屬性了在進一步抽象理解當還有ref屬性的對象被reactive包裹實際上效果是'const state = reactive(count:count.value)' const count = ref(0) const obj = reactive({ count }) console.log(obj.count) // 0 obj.count++ console.log(obj.count) // 1 console.log(count.value) // 1 count.value++ console.log(obj.count) // 2 console.log(count.value) // 2 ~~~ ~~~ <template> <div>  <span>{{ count }}--{{rcount.count}}</span> <button @click="print">Increment count</button> </div> </template> <script> import { ref ,reactive} from 'vue' export default { setup() { const count = ref(0) // 這里是{count}用一個對象吧包裹了ref // 注意不是直接一個reactive 包裹count 錯誤寫法reactiv(count) const rcount = reactive({count}) const print=() =>{ rcount.count ++ } return { rcount, count, print } } } </script> ~~~ >[danger] ##### 非對象中的屬性包含ref對象并且用reactive包裹 ~~~ 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) ~~~ >[danger] ##### 上面 reactive 包裹 ref 情況過于復雜我該怎么做 ~~~ 1.以上這些關于包裝對象的細節可能會讓你覺得有些復雜，但實際使用中你只需要記住一個基本的規則：只有當你直接以變量的形式引用一個包裝對象的時候才會需要用 .value 去取它內部的值 —— 在模版中你甚至不需要知道它們的存在。 ~~~ >[info] ## 現在對比reactive與ref-細節 ~~~ 1.ref用來處理基本類型數據, reactive用來處理對象(遞歸深度響應式) 2.如果用ref對象/數組, 內部會自動將對象/數組轉換為reactive的代理對象 3.ref內部: 通過給value屬性添加getter/setter來實現對數據的劫持 4.reactive內部: 通過使用Proxy來實現對對象內部所有數據的劫持, 并通過Reflect操作對象內部數據 5.ref的數據操作: 在js中要.value, 在模板中不需要(內部解析模板時會自動添加.value) ~~~ >[info] ## ref 和 reactive 設計出現 ~~~ 1.我們知道在 JavaScript 中，原始值類型如 string 和 number 是只有值，沒有引用的。如果在一個函數中返回一個字符串變量，接收到這個字符串的代碼只會獲得一個值，是無法追蹤原始變量后續的變化的 ~~~ >[danger] ##### 我應該什么時候去使用這兩個Api ~~~ 1.最簡單就是基本類型用'ref' ,引用類型用'reactive' ，并且這也是依賴于你的編程習慣，在定義變量的時候是屬于喜歡單獨每一項定義還是使用用對象定義 ~~~ * 舉個例子單獨每一項定義 ~~~ import { ref, onMounted, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0); const y = ref(0); function update(e) { x.value = e.pageX; y.value = e.pageY; } onMounted(() => { window.addEventListener("mousemove", update); }); onUnmounted(() => { window.removeEventListener("mousemove", update); }); return { x, y }; } ~~~ * 對象定義 ~~~ function useMousePosition() { const pos = reactive({ x: 0, y: 0 }); // ... return toRefs(pos); } ~~~ [參考文章鏈接](https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/)