| 14 | import { reactive } from '../reactivity/reactive' |
| 15 | |
| 16 | export function asVmProperty( |
| 17 | vm: ComponentInstance, |
| 18 | propName: string, |
| 19 | propValue: Ref<unknown> |
| 20 | ) { |
| 21 | const props = vm.$options.props |
| 22 | if (!(propName in vm) && !(props && hasOwn(props, propName))) { |
| 23 | if (isRef(propValue)) { |
| 24 | proxy(vm, propName, { |
| 25 | get: () => propValue.value, |
| 26 | set: (val: unknown) => { |
| 27 | propValue.value = val |
| 28 | }, |
| 29 | }) |
| 30 | } else { |
| 31 | proxy(vm, propName, { |
| 32 | get: () => { |
| 33 | if (isReactive(propValue)) { |
| 34 | ;(propValue as any).__ob__.dep.depend() |
| 35 | } |
| 36 | return propValue |
| 37 | }, |
| 38 | set: (val: any) => { |
| 39 | propValue = val |
| 40 | }, |
| 41 | }) |
| 42 | } |
| 43 | |
| 44 | if (__DEV__) { |
| 45 | // expose binding to Vue Devtool as a data property |
| 46 | // delay this until state has been resolved to prevent repeated works |
| 47 | vm.$nextTick(() => { |
| 48 | if (Object.keys(vm._data).indexOf(propName) !== -1) { |
| 49 | return |
| 50 | } |
| 51 | if (isRef(propValue)) { |
| 52 | proxy(vm._data, propName, { |
| 53 | get: () => propValue.value, |
| 54 | set: (val: unknown) => { |
| 55 | propValue.value = val |
| 56 | }, |
| 57 | }) |
| 58 | } else { |
| 59 | proxy(vm._data, propName, { |
| 60 | get: () => propValue, |
| 61 | set: (val: any) => { |
| 62 | propValue = val |
| 63 | }, |
| 64 | }) |
| 65 | } |
| 66 | }) |
| 67 | } |
| 68 | } else if (__DEV__) { |
| 69 | if (props && hasOwn(props, propName)) { |
| 70 | warn( |
| 71 | `The setup binding property "${propName}" is already declared as a prop.`, |
| 72 | vm |
| 73 | ) |