企业官网建设流程全解析

门户网站收录,百度快照和广告的区别,wordpress后台样式修改,wordpress模板二次开发一、Vue3 响应式系统概述 Vue3 响应式包 vue/reactivity#xff0c;核心由三部分构成#xff1a; 数据 (Proxy Object) —— 依赖收集 Track —— 触发更新 Trigger —— Effect 执行更新核心目标#xff1a; 拦截读取和设置操作收集依赖在数据变化时重新触发相关副作用…一、Vue3 响应式系统概述Vue3 响应式包vue/reactivity核心由三部分构成数据 (Proxy Object) —— 依赖收集 Track —— 触发更新 Trigger —— Effect 执行更新核心目标拦截读取和设置操作收集依赖在数据变化时重新触发相关副作用主要实现 API二、reactive()执行机制2.1 核心逻辑核心源码function reactive(target) { return createReactiveObject(target, false, mutableHandlers) } function createReactiveObject(target, isReadonly, baseHandlers) { if (!isObject(target)) { return target } if (target already has proxy) return existing proxy const proxy new Proxy(target, baseHandlers) cache proxy return proxy }Vue3 用 ​Proxy 拦截对象操作​比 Vue2 的Object.defineProperty更强能监听属性增删。2.2 reactive 的 handler简化const mutableHandlers { get(target, key, receiver) { const res Reflect.get(target, key, receiver) track(target, key) return isObject(res) ? reactive(res) : res }, set(target, key, value, receiver) { const oldValue target[key] const result Reflect.set(target, key, value, receiver) if (oldValue ! value) { trigger(target, key) } return result } }三、依赖收集和触发更新track()和trigger()Vue 内部维护一个 ​全局的 activeEffect​let activeEffect null function effect(fn) { activeEffect wrappedEffect(fn) fn() // 执行一次用于收集依赖 activeEffect null }每次读取get响应式数据时function track(target, key) { if (!activeEffect) return const depsMap targetMap.get(target) || new Map() const dep depsMap.get(key) || new Set() dep.add(activeEffect) }当数据被设置set时function trigger(target, key) { const depsMap targetMap.get(target) const dep depsMap?.get(key) dep?.forEach(effect effect()) }track只在读取时收集依赖trigger只在数据修改时触发 effect 重新执行四、ref()的设计与区别4.1ref是什么ref()主要用于包装基本类型对于对象引用类型内部直接调用上面的reactive()const count ref(0)其结构本质上是interface RefImpl { value: T }源码核心function ref(rawValue) { return createRef(rawValue) } function createRef(rawValue) { const refImpl { _value: convert(rawValue), dep: new Set(), // 区别于reactive引用类型复杂的多层嵌套数据结构封装depref这里直接在实例中存放一个dep来实现 get value() { trackRefValue(refImpl) return refImpl._value }, set value(newVal) { if (hasChanged(newVal, refImpl._value)) { refImpl._value convert(newVal) triggerRefValue(refImpl) } } } return refImpl }4.2 ref vs reactive 的本质区别五、template / setup 中的自动 unwrap在 Vue 模板中p{{ count }}/p如果count是一个 ref它会 ​自动解包​模板中不需要写.value。这是由编译阶段的 transform 实现的。六、响应式系统执行流程图简化reactive/ref 数据 - Proxy getter - track │ effect 注册 │ 数据 setter - trigger ↓ 重新执行 effect