[Vue] useVModel

One way data binding, the parent component pasing data through v-modelto child component, if child modify the data, v-modelwill take care emit the changed back to parent component. This partten works fine.

But there might be some problem, for example, what if inside child component, it also use v-modelbind to a form input component, when form input change the data, it only mutate child component, but parent component won't get updated.

That's been said we shouldn't use v-modleinside child component in this case, we need to use :modelValue, @update:modelValuecombined.

const cacheMap = new WeakMap()

export function useVModel(props, propName, emit) {
    return computed({
       get() {
           if (cacheMap.has(props[propName])) {
               return cacheMap.has(props[propName])
           }
           const proxy = new Proxy(props[propName], {
              get(target, key) {
                   return Reflect.get(target, key)
              },
              set(target, key, value) {
                 emit(`update:${propName}`, {
                     ...target,
                     [key]: value
                 })
                 return true
              }
           })
           cacheMap.set(props[propName], proxy);
           return proxy
       },
       set(val) {
           emit(`update:modelValue`, val)
       }
    })
}