分析 -- 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> ~~~