[imtoken苹果手机可以下载吗]Vue2如何支持compositionAPI示例详解

const value = reactive({ "composition-api.refKey": row }) export function createRef<T>( options: RefOption<T>, isReadonly = false, isComputed = false ): RefImpl<T> { const r = new RefImpl<T>(options) const sealed = Object.seal(r) if (isReadonly) readonlySet.set(sealed, true) return sealed } export class RefImpl<T> implements Ref<T> { readonly [_refBrand]!: true public value!: T constructor({ get, set }: RefOption<T>) { proxy(this, 'value', { get, set, }) } }

通过 new RefImpl 实例，该实例上有一个 value 的属性，对 value 做代理，当取值的时候返回 value[RefKey]，赋值的时候赋值给 value[RefKey], 这就是为什么 ref 可以用在基本类型，然后对返回值的 .value 进行操作。调用 object.seal 是把对象密封起来（会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。属性不可配置的效果就是属性变的不可删除，，以及一个数据属性不能被重新定义成为访问器属性，或者反之。但属性的值仍然可以修改。）

function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) { const setup = vm.$options.setup! const ctx = createSetupContext(vm) const instance = toVue3ComponentInstance(vm) instance.setupContext = ctx def(props, '__ob__', createObserver()) resolveScopedSlots(vm, ctx.slots) let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null activateCurrentInstance(instance, () => { binding = setup(props, ctx) }) // setup返回是函数的情况 需要重写render函数 const bindingObj = binding Object.keys(bindingObj).forEach((name) => { let bindingValue: any = bindingObj[name] // 数据处理 asVmProperty(vm, name, bindingValue) }) return } }

这个函数比较长，不在本次要讲解的主线上代码逻辑都删除了，这个函数主要是创建了 ctx 和把 vm 实例转换成 Vue3 数据类型定义的 instance ，然后执行 setup 函数得到返回值，然后遍历每个属性，调用 asVmProperty 挂载到 vm 上面，当然这里的挂载不是直接通过把属性和值添加到 vm 上面，这么做会有一个问题，就是后续对该属性的修改不能同步到 vm 中，这里采用的还是 Vue 最常见的数据代理。

function ref(raw?: unknown) { if (isRef(raw)) { return raw } const value = reactive({ [RefKey]: raw }) return createRef({ get: () => value[RefKey] as any, set: (v) => ((value[RefKey] as any) = v), }) }