为什么不能将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中所述：

  

目标对象不能是Vue实例或Vue实例的根数据对象。

这是技术限制。