贵州住房建设厅网站,深圳游戏公司,中国建设银行进不了登录网站,优质网站建设前言
上一篇文章介绍了vue/composition-api是什么#xff0c;以及为什么要用#xff0c;现在来系统地解析一下 vue/composition-api 的实现原理#xff0c;希望可以加深对其工作机制的理解。
老规矩先分享下AI评价#xff1a;对vue/composition-api实现原理的介绍整体上非…前言
上一篇文章介绍了vue/composition-api是什么以及为什么要用现在来系统地解析一下 vue/composition-api 的实现原理希望可以加深对其工作机制的理解。
老规矩先分享下AI评价对vue/composition-api实现原理的介绍整体上非常详细和准确展示了核心代码以及关键逻辑这为理解其工作机制提供了很好的分析。
核心代码分析
install
引入vue/composition-api时需要手动通过Vue.use()来调用该插件的install所以我们看看安装时到底做了什么 export function install(Vue: VueConstructor) {setVueConstructor(Vue)mixin(Vue)
}这里最重要的其实是mixin函数定义了在beforeCreate钩子中去执行初始化 构建props和上下文ctx对象执行setup函数
export function mixin(Vue: VueConstructor) {Vue.mixin({beforeCreate: functionApiInit,mounted(this: ComponentInstance) {afterRender(this)},beforeUpdate() {updateVmAttrs(this as ComponentInstance)},updated(this: ComponentInstance) {afterRender(this)},})function functionApiInit(this: ComponentInstance) {const vm thisconst $options vm.$optionsconst { setup, render } $optionsconst { data } $options// wrapper the data option, so we can invoke setup before data get resolved$options.data function wrappedData() {// 在data周期时进行setup函数的执行initSetup(vm, vm.$props)return data || {}}}function initSetup(vm: ComponentInstance, props: Recordany, any {}) {const setup vm.$options.setup!// 构造ctx对象有以下key// slots: 组件的插槽,默认为 {}// root: 组件的根实例// parent: 组件的父实例// refs: 组件的 ref 引用// listeners: 组件的事件监听器// isServer: 是否是服务端渲染// ssrContext: 服务端渲染的上下文// emit: 组件的自定义事件触发函数const ctx createSetupContext(vm)const instance toVue3ComponentInstance(vm)instance.setupContext ctx// 通过Vue.observable对props进行响应式监听def(props, __ob__, createObserver())}
}ref
ref函数可以把一个普通的值转成响应式的数据。它返回一个可变的ref对象,对象上挂载了一个.value属性,我们可以通过这个.value属性读取或者修改ref的值。
其本质还是基于reactive来实现的响应式只不过做了一个前置的get、set封装源码如下
export function ref(raw?: unknown) {// ref的本质其实还是调用的reactive// 然后通过 get/set 方法操作这个对象的值来实现对 ref 值的跟踪和响应const value reactive({ [RefKey]: raw })return createRef({get: () value[RefKey] as any,set: (v) ((value[RefKey] as any) v),})
}createRef最后还是基于Object.defineProperty
export function proxy(target: any,key: string,{ get, set }: { get?: Function; set?: Function }
) {Object.defineProperty(target, key, {enumerable: true,configurable: true,get: get || noopFn,set: set || noopFn,})
}reactive
底层基于Vue.observable来建立响应式监听Vue.observable 在 Vue2 和 Vue3 中的实现方式有所区别而已
export function reactiveT extends object(obj: T): UnwrapRefT {// 基于Vue.observableconst observed observe(obj)setupAccessControl(observed)return observed as UnwrapRefT
}computed
computed函数用来创建一个计算属性它根据依赖进行缓存和懒执行。
构建get、set函数通过vue的Watcher对象进行监听绑定。
export function computedT(getterOrOptions: ComputedGetterT | WritableComputedOptionsT
): ComputedRefT | WritableComputedRefT {const vm getCurrentScopeVM()let getter: ComputedGetterTlet setter: ComputedSetterT | undefinedgetter getterOrOptions.getsetter getterOrOptions.setlet computedSetterlet computedGetterconst { Watcher, Dep } getVueInternalClasses()let watcher: anycomputedGetter () {if (!watcher) {watcher new Watcher(vm, getter, noopFn, { lazy: true })}if (watcher.dirty) {watcher.evaluate()}if (Dep.target) {watcher.depend()}return watcher.value}computedSetter (v: T) {if (setter) {setter(v)}}return createRefT({get: computedGetter,set: computedSetter,},!setter,true) as WritableComputedRefT | ComputedRefT
}watch
watch函数用于侦听特定的数据源,并在回调函数中执行副作用。
底层是通过Vue.$watch来实现的
// 底层是通过Vue.$watch来实现
function createVueWatcher(vm: ComponentInstance,getter: () any,callback: (n: any, o: any) any,options: {deep: booleansync: booleanimmediateInvokeCallback?: booleannoRun?: booleanbefore?: () void}
): VueWatcher {const index vm._watchers.length// ts-ignore: use undocumented optionsvm.$watch(getter, callback, {immediate: options.immediateInvokeCallback,deep: options.deep,lazy: options.noRun,sync: options.sync,before: options.before,})return vm._watchers[index]
}toRefs
toRefs 可以把一个 reactive 对象的属性都转成 ref 形式。
底层是一个个遍历key去调用toRef然后基于createRef来保留响应式能力
export function toRefT extends object, K extends keyof T(object: T,key: K
): RefT[K] {if (!(key in object)) set(object, key, undefined)const v object[key]if (isRefT[K](v)) return vreturn createRef({get: () object[key],set: (v) (object[key] v),})
}生命周期
生命周期其实是一个临时覆盖
// 利用 Vue 的选项合并策略(option merge strategies),
// 通过给组件实例的 $options 注入自定义的生命周期hook函数,来override原有的生命周期选项。// 生命周期hook函数需要通过 getCurrentInstance() 获取当前活跃的组件实例,
// 并在执行回调前通过 setCurrentInstance()绑定实例,在回调执行完毕后恢复之前的实例。export const onBeforeMount createLifeCycle(beforeMount)
export const onMounted createLifeCycle(mounted)
export const onBeforeUpdate createLifeCycle(beforeUpdate)
export const onUpdated createLifeCycle(updated)
export const onBeforeUnmount createLifeCycle(beforeDestroy)
export const onUnmounted createLifeCycle(destroyed)
export const onErrorCaptured createLifeCycle(errorCaptured)
export const onActivated createLifeCycle(activated)
export const onDeactivated createLifeCycle(deactivated)
export const onServerPrefetch createLifeCycle(serverPrefetch)
