vue响应式原理之reactive与shallowReactive
2023-09-11 14:19:18 时间
专栏目录请点击
代码
- 我们先写一段代码,然后对于这个代码进行解释
<!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 reactiveHandler = {
get(target, key) {
if (key === '_is_reactive') return true
return Reflect.get(target, key)
},
set(target, key, value) {
const result = Reflect.set(target, key, value)
console.log('数据已更新, 去更新界面')
return result
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('数据已删除, 去更新界面')
return result
},
}
// 定义shallowReactive函数
function shallowReactive(obj) {
return new Proxy(obj, reactiveHandler)
}
// 定义reactive函数,通过递归实现全部的响应式(对于每一个对象进行代理)
function reactive(target) {
if (target && typeof target === 'object') {
if (target instanceof Array) { // 数组
target.forEach((item, index) => {
target[index] = reactive(item)
})
} else { // 对象
Object.keys(target).forEach(key => {
target[key] = reactive(target[key])
})
}
const proxy = new Proxy(target, reactiveHandler)
return proxy
}
return target
}
// 测试自定义shallowReactive
const proxy = shallowReactive({
a: {
b: 3
}
})
proxy.a = { b: 4 } // 劫持到了
proxy.a.b = 5 // 没有劫持到
// 测试自定义reactive
const obj = {
a: 'abc',
b: [{ x: 1 }],
c: { x: [11] },
}
const proxy = reactive(obj)
console.log(proxy)
proxy.b[0].x += 1
proxy.c.x[0] += 1
</script>
</body>
</html>
对于代码的解释
- 进行对象的操作的拦截,我们一定会用到
Proxy
这个函数,我们先写一些拦截的操作,也就是reactiveHandler
- 因为
shallowReactive
是对于对象的的首层属性进行相应,所以我们不需要遍历,直接就实现了 - 但是对于
reactive
,他是深度响应式,我们需要遍历实现,但是数组和对象的遍历又不相同,所以我们进行分开处理 - 然后用递归实现每个属性的响应式
- 递归我们可以看做压栈,这样我们就简单实现了
reactive
与shallowReactive
相关文章
- import Vue from 'vue';
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue生命周期探究(一)
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- Vue - 修改富文本内元素样式,支持 scoped (自定义指令解析的富文本内图片、表格元素,即保留原有样式,又能加入额外自定义的样式详细教程)nuxt.js uni-app 微信小程序wechat
- Vue——详解MVVM模型在vue中的使用
- Vue —— 创建响应式对象的四种方式对比(reactive、ref、toRef、toRefs)
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- springboot + vue 项目之前端开发工具(一)
- (15)打鸡儿教你Vue.js
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
- 手写一个简易vue响应式带你了解响应式原理
- Vue响应式原理
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- 面试官:说说Vue响应式原理
- 浅析Vue CompositionAPI和React Hooks对比:hook的意义、两者差别(原理-链表/Proxy、代码执行-每次渲染都执行/组件创建时运行、声明响应式状态、如何跟踪依赖、生命周期、自定义hook、Ref获取元素、计算属性附加函数、Context和provide/inject、在渲染上下文中暴露值)
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Vue学习第14天——vue自定义事件及详细代码演示