如何在 vue js 中使用 watch 功能答案

【问题标题】：how to use watch function in vue js如何在 vue js 中使用 watch 功能
【发布时间】：2018-02-11 05:13:46
【问题描述】：

能否请您告诉我如何在 vue js 中使用 watch 功能。我尝试使用但出现此错误。

vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"

found in

---> <AddTodo>
       <Root>

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

我在主组件中创建了不同的组件和watch属性

var AddTODO = Vue.extend({
    template: '#add-todo',
    props: ['m'],
    data: function () {
        return {
            message: ''
        }
    },
    methods: {
        addTodo: function () {
            console.log(this.message)
            console.log(this.m);
            this.m =this.message;
        },
    },
});

当我尝试添加 item 时，我收到了这个错误。 重现此错误的步骤

在输入字段中输入任何内容并单击Add button

【问题讨论】：

无法复制，工作正常

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

this.m =this.message;

这一行是问题，

建议不要直接修改prop...

而是创建一个数据属性，然后对其进行修改。

它显示警告，因为您正在修改道具项目，每当父组件重新渲染时，道具值将被覆盖。

【讨论】：

如何查看属性？见我想使用watch方法添加一个项目到列表中
为什么要使用watch？你能解释一下吗:)
我只想检查如何检查我的财产的新旧价值
您可以将一个项目添加到 data 然后在 created() 生命周期方法 中，将 prop 的值分配给您的数据项。例如：this.dataItem = this.propItem 然后以正常方式观察 dataItem。

【解决方案2】：

只要您在组件之外更改其值，组件的 props 就会在组件中自动更新。出于这个原因，尝试从组件内部更改属性的值是一个坏主意：您应该将 props 用作只读。如果你想使用一个 prop 作为你的某些组件的 data 的初始值，你可以简单地这样声明它：

data: function () {
    return {
        changeable: this.receivedProp;
    }
},

话虽如此，如果您试图从组件内部更改 prop 的值，以便能够在组件外部使用重新分配的 prop，那么您的做法是错误的。您应该使用Vue's custom events 来处理这个问题。请记住，正如 Vue 的文档所述：

在Vue中，父子组件关系可以概括为props down，events up。父级通过 props 向下传递数据给子级，子级通过事件向父级发送消息。

【讨论】：