vue3 中reflect的作用

时间: 2023-11-25 16:26:24 浏览: 54

vue3相关.docx

Vue3 相关知识点总结一、安装及目录结构 * 使用 Vue/cli 安装（要求 @vue/cli 版本需在 4.5.0 及以上） * 亦可以选择 vite（vite 创建的速度比上面的方法快）二、Main.js * createApp 的参数是根组件（App），在挂载应用时，该组件是渲染的起点 * 一个应用需要被挂载到一个 DOM 元素中，使用 mount('#app') 将 Vue 应用 App 挂载到 <div id="app"></div> 中三、生命周期变化 * 钩子命名都增加了 on * beforeCreate -> 使用 setup() * created -> 使用 setup() * beforeDestroy -> beforeUnmount * destroyed -> unmounted * 新增用于调试的钩子函数 onRenderTriggered 跟踪虚拟 DOM 重新渲染时调用 * onRenderTracked 当虚拟 DOM 重新渲染被触发时调用 * Vue3 的生命周期比 Vue2.X 的生命周期快（onBeforeMount 比 beforeMount 快其他同理）四、响应式原理 * Vue2 的响应式原理 + 对象类型：通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持） + 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹） + 存在问题：新增、删除属性界面不会更新；直接修改数组某项值，界面不会自动更新 * Vue3 的响应式实现原理： + 通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等等。 + 通过 Reflect（反射）：对被代理对象的属性进行操作五、setup * setup 是 Vue3.x 新增的一个选项 * setup 参数 + props：值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性 + context：上下文对象 - attrs：值为对象，包含组件外部传递过来，但没有在 props 配置中声明的，相当于 this.attrs - slots：收到的插槽内容，相当于 this.$slots - emit：分发自定义事件的函数，相当于 this.$emit * setup 执行时机：开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method 六、reactive、ref、toRefs、readonly * reactive 用于处理对象的双向绑定 * ref 处理 js 基础类型或者处理对象的双向绑定 * ref 对象具有指向内部值的单个 property.value * toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象 * Readonly：有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但也希望防止在应用程序的某个位置更改它七、判断是哪种响应式创建的方法 * isRef：检查一个值是否为一个 ref 对象 * isReactive：检查一个对象是否是由 reactive 创建的响应式代理 * isReadonly：检查一个对象是否是由 readonly 创建的只读代理 * isProxy：检查一个对象是否是由 reactive 或者 readonly 方法创建的代理八、ref 获取元素 * Vue2 获取元素 * Vue3 获取元素 * 注意点： 1. 变量名称必须要与 ref 命名的属性名称一致 2. 通过 divDom.value 的形式获取 DOM 元素 3. 必须要在 DOM 渲染完成后才可以获取 divDom.value，否则就是 null 九、使用 async/await 方法 * 方法一：在它的父组件外层需要嵌套一个 suspense 内置组件（不推荐）

Reflect 在 Vue 3 中是作为一个全局对象存在的，它包含了、定义了一系列可以用来操作对象的方法，常用的有：Reflect.ownKeys() 、Reflect.getOwnPropertyDescriptor()、Reflect.defineProperty()、Reflect.deleteProperty()等等，其中最常用的就是Reflect.defineProperty()。它的作用是可以修改或者定义对象的某个属性描述对象，类似于Object.defineProperty()。同时它也可以生成 Proxy 实例，它可以拦截并定制对象的基本操作行为。

阅读全文

vue3 中reflect的作用

相关推荐

Ref Effect baseHandler reactive Proxy Vue 3

vue3实现v-model原理详解

vue3proxy结合reflect

js代码-Proxy and reflect prerequisite for vue3 reactive

vue3Learn:vue3原始码阅读理解，含中文注释

Vue前端面试题合集含vue3

vue3-impl:Vue3原始码原理代码实现的一个练习仓库

Vue面试深度解析：从Vue2到Vue3的响应式原理

在Vue 3.0中使用Proxy与Reflect API：深入理解响应式原理

如何用vue 写threejs得reflect效果

vue3中的响应式原理

Proxy vue3

vue3 proxy

vue2 vue3的原理

vue2和vue3实现原理

vue3和vue2的比较

vue3较vue2的好处

vue3 proxy 原理

vue2和vue3的api差异

最新推荐

Vue 2.0在IE11中打开项目页面空白的问题解决

串流分屏 - 两台笔记本电脑屏幕共享

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界

在选择PL2303和CP2102/CP2103 USB转串口芯片时，应如何考虑和比较它们的数据格式和波特率支持能力？