Vue3 - 响应式原理(Proxy、Reflect)

news/2024/7/10 2:35:14 标签: vue, vue3, javascript

实现原理:

  • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等,语法: new Proxy(target, handler) 。

  • 通过Reflect(反射): 对源对象的属性进行操作。

javascript">new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})


http://www.niftyadmin.cn/n/508599.html

相关文章

Vue3 - setup函数

Vue3.0中一个新的配置项,值为一个函数 组件中所用到的:数据、方法等等,均要配置在setup中 setup执行的时机:在beforeCreate之前执行一次,this是undefined setup有两个参数:props、context 1、props 值为…

Vue3 - 监听(watch函数、watchEffect函数)

1、watch函数(既要指明监视的属性,也要指明监视的回调) 坑: 1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效) 2)监视reactiv…

Vue3 - setup语法糖

与setup函数不同的是&#xff0c;在script标签中添加setup 1、变量、方法不需要 return 出来 属性和方法也不用返回&#xff0c;也不用写setup函数&#xff0c;也不用写export default &#xff0c;甚至是自定义指令也可以在我们的template中自动获得 <script setup>im…

树结构数据,将子数据push到对应数组中

树结构数据中&#xff0c;结构为[{...children:[{}],...},{},{}]&#xff0c;子元素保存在children中&#xff0c;假设目前有一组数据&#xff0c;现有一个对象&#xff0c;需要遍历数据&#xff0c;找到对象的父级&#xff0c;push到父级的children中 // id&#xff1a;需要p…

vscode 使用markdown 转PDF的常见问题 之插件安装

1、Markdown 主要的插件&#xff0c;一切markdown代码都需要依赖于它2、Markdown All in one 各种快捷键的介绍&#xff0c;以及各种代码提示&#xff0c;想要快速入门 markdown &#xff0c;这个插件是必不可少的3、Markdown PDF 转PDF的主要插件4、Markdown Preview Enhan…

vscode 使用Markdown 常用技巧之摆脱Google Chrome直转PDF

文章目录1打开markdown敲出代码在这里插入图片描述2、单击鼠标右键单击或者直接使用快捷键 CTRLk v3、在新打开的窗口中单击右键选择4、在浏览器中你打开的页面单击鼠标右键&#xff0c;打击打印5、然后出现如下情况&#xff0c;选择保存就可以了6、至此我们已经摆脱了谷歌浏览…

统计天数

题目描述 炎热的夏日&#xff0c;KC 非常的不爽。他宁可忍受北极的寒冷&#xff0c;也不愿忍受厦门的夏天。最近&#xff0c;他开始研究天气的变化。他希望用研究的结果预测未来的天气。 经历千辛万苦&#xff0c;他收集了连续 N(1≤N≤106)N(1 \leq N \leq 10^6)N(1≤N≤106) …

洛谷P2141珠心算测验 (枚举暴力解法)

题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术。珠心斜体样式算训练&#xff0c;既能够开发智力&#xff0c;又能够为日常生活带来很多便利&#xff0c;因而在很多学校得到普及。 某学校的珠心算老师采用一种快速考察珠心算加法能力的测验方法。他…