vue.js：从观察者更新数据

【问题标题】：vue.js: Update data from watchervue.js：从观察者更新数据
【发布时间】：2017-10-24 13:29:06
【问题描述】：

我有以下代码：

export default {
    name: '...',
    props: ['user'],
    data() {
        return {
            userName: this.user.name
        }
    },
    watch: {
        user: (_user) => {
            this.userName = _user.name
        }
    },
    methods: {
        ...
    }
};

userprop 由父组件更新（它是来自服务器的信息）。如果我记录 _user 变量，我将拥有所有可用的东西。 userName 属性没有更新。

【问题讨论】：

标签： javascript data-binding vue.js watch

【解决方案1】：

由于您使用如下粗箭头功能：

user: (_user) => {
            this.userName = _user.name
        }

this 没有指向 vue 实例，因此通过使用 this.userName，您不会引用数据中的 userName 属性。

所以像这样使用普通函数：

user: function(_user){
            this.userName = _user.name
        }

vuejs 文档中提到了关于使用箭头函数定义观察者的警告。你可以看看here

【讨论】：