Javascript Vue中的Computed属性未触发监视

根据，监视计算属性应该不是问题。但我的代码却不起作用

<template>
    <div v-if="product" class="section">
        <form>
            <div class="control"><input type="text" class="input" v-model="title"></div>
            <div class="control"><input type="text" class="input" v-model="description"></div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: null,
            description: null
        }
    },
    computed: {
        product() {
            // const payload = { collection: 'products', id: this.$route.params.productId }
            // return this.$store.getters.objectFromId(payload)
            console.log('working')
            return { title: 'Awesome Title', description: 'Awesome Description' }
        }
    },
    watch: {
        product() {
            this.title = this.product.title,
            this.description = this.product.description
        }
    }
}
</script>

---

但是编译器给了我一个警告：

错误：“product”计算属性中的意外副作用

您的结构有点乱

product

是一个计算的产品，因此它在源值更改时运行。（您无法控制它的运行时间。）它不应该有副作用（分配

this.description

，

this.title

）或触发网络请求

product

中的代码正在获取您的源数据。这属于

方法

，显式链接到用户操作或生命周期事件

为什么需要复制数据（

watch:product

）中的

this.description=product.description

）？当您的数据（您的应用程序状态）位于Vue之外（例如全局变量）时，Vue工作得最好。然后，您的Vue组件就可以透明地反映给定时刻的应用程序状态

---

希望这有帮助。

根据OP的评论，他的目的是获取并加载一些初始数据。 实现此行为的常用方法是将其放置在创建或安装的vuejs生命周期挂钩中

<template>
    <div v-if="product" class="section">
        <form>
            <div class="control"><input type="text" class="input" v-model="title"></div>
            <div class="control"><input type="text" class="input" v-model="description"></div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '',
            description: ''
        }
    },

    created() {
        this.getInitialData();
        this.foo();

        console.log("created!");
    },

    methods: {
        getInitialData: function(){
            const payload = {
                collection: 'products', 
                id: this.$route.params.productId 
            };
            var product = this.$store.getters.objectFromId(payload);
            this.title = product.title;
            this.description = product.description;
        },
        foo: function(){// ...}
    },
}
</script>

导出默认值{
数据（）{
返回{
标题：“”，
说明：“”
}
},
创建（）{
这是.getInitialData（）；
this.foo（）；
log（“已创建！”）；
},
方法：{
getInitialData:函数（）{
常数有效载荷={
收藏品:"产品",，
id:this.$route.params.productId
};
var product=this.$store.getters.objectFromId（有效负载）；
this.title=product.title；
this.description=product.description；
},
foo:function（）{/…}
},
}

您想要实现什么目标？可能会有一个更直接的解决方案来解决你的问题。我已经更新了我的帖子，以更清楚地显示我的意图。我试图获取一个产品并设置一些绑定到某些表单输入的inital data（）。我可以在compute函数中设置值，但是我在编译器中得到了这个恼人的副作用警告。我认为在get中设置属性是不好的做法？您需要使用

immediate

设置，以便让您的观察者在初始渲染时开火。@HamishJohnson您不使用computed。看看创建/安装的vue.js挂钩。在它们内部，您可以加载外部数据并将其附加到当前数据model@Enrico是的，我同意你的观点-不确定我为什么在这个例子中选择computed。谢谢

<template>
    <div v-if="product" class="section">
        <form>
            <div class="control"><input type="text" class="input" v-model="title"></div>
            <div class="control"><input type="text" class="input" v-model="description"></div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '',
            description: ''
        }
    },

    created() {
        this.getInitialData();
        this.foo();

        console.log("created!");
    },

    methods: {
        getInitialData: function(){
            const payload = {
                collection: 'products', 
                id: this.$route.params.productId 
            };
            var product = this.$store.getters.objectFromId(payload);
            this.title = product.title;
            this.description = product.description;
        },
        foo: function(){// ...}
    },
}
</script>