前文指路：《Vue零底子教程》，从前端框架到GIS开辟系列课程
Vue零底子教程|从前端框架到GIS开辟系列课程（二）
Vue零底子教程|从前端框架到GIS开辟系列课程（三）模板语法
Vue零底子教程|从前端框架到GIS开辟系列课程（四）盘算属性与侦听器
Vue零底子教程|从前端框架到GIS开辟系列课程（五）组件式开辟
Vue零底子教程|从前端框架到GIS开辟系列课程（六）组合式API
Party1什么是相应式
当数据改变时, 引用数据的函数会主动重新实行
Party2手动完成相应过程
起首, 明白一个概念:相应式是一个过程, 这个过程存在两个加入者: 一方触发, 另一方相应
同样, 所谓数据相应式的两个加入者
●触发者: 数据
●相应者: 引用数据的函数
当数据改变时, 引用数据的函数相应数据的改变, 重新实行
我们先手动完成相应过程
示例
- <!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> // 定义一个全局对象: `触发者` const obj = { name: 'hello' }
- // effect函数引用了obj.name, 这个函数就是 `响应者` function effect() { // 这里可以通过app拿到DOM对象 app.innerHTML = obj.name }
- effect()
- // 当obj.name改变时, 手动执行effect函数, 完成响应过程 setTimeout(() => { obj.name = 'brojie' effect() }, 1000)</script> </body></html>
Party3副作用函数
如果一个函数引用了外部的资源, 这个函数会受到外部资源改变的影响
我们就说这个函数存在副作用. 因此, 也把该函数叫做副作用函数
这里, 各人不要被这个生疏的名字吓唬住
所谓副作用函数就是引用了数据的函数大概说数据关联的函数
Party4自界说设置过程
如果我们能感知数据改变, 拦截到赋值利用. 自界说设置过程
在赋值的同时调用一下数据关联的副作用函数, 就可以实现主动重新实行
理论上可行, 开始动手实践
1) Proxy署理对象
这里我们须要先增补一下Proxy干系的知识. 如果已经知道的小同伴可以略过
new Proxy: 传入一个源对象, 返回一个新对象(署理对象)
当访问署理对象的属性时, 可以自界说访问过程
当设置署理对象的属性时, 可以自界说设置过程
示例
- <!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> <script> // 定义一个源对象(目标对象) const obj = { name: 'xiaopang' } // 创建一个代理对象 const proxy = new Proxy(obj, { get(target, key) { // 当访问proxy代理对象的属性时, 会执行get函数 // 将get函数的返回值作为表达式的值 console.log(target, key) return target[key] // obj.name obj[name] }, set(target, key, value) { // 当设置proxy代理对象的属性时, 会执行set函数 console.log('自定义set操作', value) target[key] = value return true }, }) // console.log(proxy.name) // console.log(proxy.age) proxy.name = 'xxp' console.log(obj)</script> </body></html>
1先创建署理对象
2再利用署理对象(给署理对象赋值)
2) 最根本的reactive函数
界说一个函数reactive, 传入一个平凡对象, 返回署理对象
示例
- <!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> <script> function isObject(value) { return typeof value === 'object' && value !== null } /** * 创建响应式数据 * @param [object]: 普通对象 * @return [Proxy]: 代理对象 */ function reactive(data) { if (!isObject(data)) return
- return new Proxy(data, { get(target, key) { return target[key] }, set(target, key, value) { target[key] = value return true }, }) }
- const state = { name: 'xiaopang' } const p = reactive(state) p.name = 'xxp' console.log(p.name)</script> </body></html>
既然可以自界说set利用, 只须要在自界说set利用时, 重新实行属性关联的副作用函数
示例
- <!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">hello</div> <script> /** * 定义响应式 * @param [object] : 普通对象 * @return [Proxy] : 代理对象 */ function reactive(data) { // 如果传入的data不是一个普通对象, 不处理 if (typeof data !== 'object' || data == null) return
- return new Proxy(data, { get(target, key) { console.log(`自定义访问${key}`) return target[key] }, set(target, key, value) { console.log(`自定义设置${key}=${value}`) target[key] = value // 先更新值 effect() // 再调用effect, 调用effect时会重新获取新的数据 return true }, }) }
- const pState = reactive({ name: 'hello' })
- function effect() { app.innerHTML = pState.name }
- setTimeout(() => { pState.name = 'brojie' }, 1000)</script> </body></html>
💡小结
1相应式是一个过程, 存在触发者和相应者
2数据的改变, 触发关联的副作用函数相应(重新实行)
3通过Proxy署理源数据
4在Proxy的自界说set利用中, 重新实行副作用函数
须要vue教程资料，备注：《Vue零底子教程》
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
发表于 2025-11-23 20:04:28