分析 -- reactivity · 前端工程化學習筆記

>[success] # 分析 -- reactivity ~~~ 1.先安裝'@vue/reactivity' 模塊，知道一下屬性大概含義 reactive -- '響應式轉換是“深層”的，會將對象里的所有屬性都進行proxy代理' shallowReactive -- '只代理第一層對象' readonly -- '只讀代理是深層的：任何被訪問所有屬性都是只讀即不能屬性賦值' shallowReadonly -- '只對最外層只讀因為外層沒有收集依賴，雖然里層能改但是不會更新視圖' effect -- 'effect 會默認執行，執行時會收集屬性的依賴效果類似vue2.x 計算屬性' ~~~ >[info] ## 安裝后使用案例 ~~~ 1.下面案例使用'@vue/reactivity' ,收集屬性依賴，當屬性改變時候被'effect' 內部收集到所改變的屬性，觸發一個頁面渲染的dom 邏輯 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"></div> <script src="node_modules/@vue/reactivity/dist/reactivity.global.js"></script> <script> let { reactive, shallowReactive, readonly, shallowReadonly, effect, } = VueReactivity let info = { name: 'w', age: '12', hobbies: [{ football: true }] } // 會將對象里的所有對象都進行代理 proxy，“深層” 即對象每一層都被代理 const proxyInfo = reactive(info) let appDom = document.getElementById('app') // 生興趣列表dom ls function getHobbiesDom(hobbies) { let p = null let content = '' return hobbies.map((item) => { content = `${Object.keys(item)[0]}-${ Object.values(item)[0] }` p = document.createElement('p') p.innerHTML = content return p }) } // 執行時會收集屬性的依賴,當內部依賴改變時候，會再次執行，很像vue計算屬性 effect(() => { appDom.textContent = `${proxyInfo.name}${proxyInfo.age}` const hobbiesDom = getHobbiesDom(proxyInfo.hobbies) hobbiesDom.forEach((element) => { appDom.appendChild(element) }) }) setTimeout(() => { proxyInfo.name = 'cc' }, 1000) </script> </body> </html> ~~~