When v-show render instruction is passed a reference object, the instruction will not work

[SamirGuo]

Version

2.6.10

Reproduction link

https://codepen.io/SamirGuo/pen/vYBezXz

Steps to reproduce

<div id="app">
<template>
  <div>
    <button @click="visible = !visible">显示/隐藏</button>
    <my-component :visible="visible" style="border-bottom: solid 1px #ccc" />
  </div>
</template>
</div>

const directive = {
    name: 'show',
    value: true
};

Vue.component('MyComponent', {
    props: {
        mystyle: '',
        visible: true
    },
    render(h) {
        directive.value = this.visible;
        return h('div', {
            // do not work!
            directives: [directive],
            // work well!
            // directives: [{
            //     name: 'show',
            //     value: this.visible
            // }],
            domProps: {
                innerText: 'sssssss'
            },
            style: this.mystyle
        });
    }
});


var Main = {
    data() {
      return { 
        visible: true
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

What is expected?

v-show to be applied

What is actually happening?

v-show isn't applied

---

When the instruction update logic assigns oldValue, oldVnode.data.directives ["show"] and vnode.data.directives ["show"] are actually the same object.
So dir.oldValue = oldDir.value is actually equivalent to dir.oldValue = dir.value; in the later update event, dir.oldValue === dir.value

[posva]

You can just spread the global object: [{...directive}],. What is the use case for a shared directive object?

[SamirGuo]

Thank you. But my components are dynamically generated from a library. We are passing in data, so there is no way to deconstruct it during generation.

[posva]

Okay, so in your case, the code must be fixed in the library but what is the use case for a shared directive object?

[SamirGuo]

Thanks for your response. This scenario was temporarily solved by hacking. However, this problem does exist. May be possible to consider whether there is a solution in Vue.

[posva]

Okay, I'm glad you found a solution for it :)
Is there a specific condition that forces you to use a shared directive declaration instead of creating a directive declaration inside of the render function like in the workaround I gave you?

[SamirGuo]

// component is dynamically created by config.

render() {
......
return (
<component
{...config}
>
{ this.renderChild() }

);
}

[seadavis]

@posva I started, too look into this. This is happening because the render function is returning a reference and not creating a new value. One solution is to just copy the value from the directive after, vnode = render.call(vm._renderProxy, vm.$createElement) in render.js line 91, so something like vnode.data.directives[0].value = JSON.parse(JSON.stringify(vnode.data.directives[0].value)) and you would of course iterate over the list. That would work, but, doing it for directives seems like an odd special case. Do you know of a sensible way to copy all of the data into the new vnode,instead of just returning the results from the render function?

[seadavis]

it almost seems to me like the memento pattern might be appropriate here.

[posva]

This still needs a use case:

Is there a specific condition that forces you to use a shared directive declaration instead of creating a directive declaration inside of the render function like in the workaround I gave you?

[iamahuman]

Note that the moment you return a VNode object from a render function, Vue.js claims ownership of objects you passed in to the createElement function, and some properties like on, attrs could even be modified.