为什么不能将 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

如文档中所述：

目标对象不能是 Vue 实例

，也不能是 Vue 实例的根数据对象。

这是一个技术限制。