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

Question

我有以下代码：

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

userprop 由父组件更新(它是来自服务器的信息(。如果我记录_user变量，我就拥有一切可用的东西。不过，userName道具不会更新。

Answer 1

由于您使用的是胖箭头函数，如下所示：

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

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

所以使用这样的正常函数：

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

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