为什么不能将 Vue.js 反应式 属性 直接添加到根模型？

Question

下面是一些使用 $set() 向模型添加新反应式道具的代码。它工作正常。

<template>
    <div id="app">
        <div>
            Prop1: {{ x.prop1 }}
        </div>
        <div>
            <input type="button" value="Go" @click="go()">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',

        data() {
            return {
                x: {}
            };
        },

        methods: {
            go() {
                this.$set(this.x, 'prop1', 'yay');
            }
        }
    };
</script>

现在，如果我删除 x 根 属性 并尝试将 prop1 直接添加到 this 它不起作用。

<template>
    <div id="app">
        <div>
            Prop1: {{ prop1 }}
        </div>
        <div>
            <input type="button" value="Go" @click="go()">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',

        data() {
            return {
            };
        },

        methods: {
            go() {
                this.$set(this, 'prop1', 'yay');
            }
        }
    };
</script>

我知道你应该做这种事情，但我不明白为什么它不起作用。

Answer 1

如 docs 中所述：

The target object cannot be a Vue instance, or the root data object of a Vue instance.

这是技术限制。