The production behavior is inconsistent with development behavior

sionzee

Sep 3rd 2020

Version

3.0.0-rc.10

Reproduction code

Create test.html file on your desktop and put there this:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.10/dist/vue.global.js"></script>
</head>
<body>
        <div id="app"></div>
    <script>
    
    const InnerComp2 = Vue.defineComponent({
        template: '<div ref="$test2">INSIDE!</div>',
        setup() { return {$test2: Vue.ref(), testValue: "OK"}}
    })
    
    const InnerComp = Vue.defineComponent({
        components: {InnerComp2},
        template: '<InnerComp2 ref="$test1"/>',
        setup() { return {$test1: Vue.ref()}}
    })
    
    const comp = Vue.defineComponent({
        components: {InnerComp},
        template: '<InnerComp ref="myComp"/>',
        setup() {
            const myComp = Vue.ref();
            window.addEventListener("click", () => {
                Vue.nextTick(() => {
                    const test2 = myComp.value.$test1.$test2
                    const value = myComp.value.$test1.testValue
                    debugger;
                })
            })
            return {myComp}
        }
    });
    
    Vue.createApp(comp).mount("#app");

    </script>
</body>
</html>

Steps to reproduce

Open the file and open Console.
Click somewhere in the document (it will stop on debugger). There are test2 and testValue variables accesible.
Change Vue script link to https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.10/dist/vue.global.prod.js in <head>
Repeat point 1 and 2.

The document throws an error the variables are not accessible.

What is expected?

We need to have access to reference of component to call its functions or access the variables inside component. This behavior should be same for production nor development mode.

What is actually happening?

The behavior is inconsistent for production build.

yyx990803

Sep 3rd 2020

$ is a reserved prefix so you shouldn't be using it.

fa7ab0a now warns such cases and makes your case fail in both dev and prod.

GitHub Track