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

现在，如果我删除xroot 属性并尝试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>

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

标签： vue.js

Answer 1

如文档中所述：

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

这是一个技术限制。