Vue.js Vue计算方法可以'；t使用模板中的setter更改数据

我需要使用计算的更改数据：

<template>
    <div>{{ userDataTest }}</div>
</template>

props: {
    exampleData: {
        type: Object,
        required: true,
    },
},

computed: {
    userDataTest: {
        get: function() {
            return this.exampleData;
        },
        set: function(newValue) {
            console.log(newValue);
            return newValue;
        },
    },
}

mounted () {
    setTimeout(() => {
        console.log('Change now to null!');
        this.userDataTest = null;
    }, 5000);
},

{{userDataTest}}
道具：{
示例数据：{
类型：对象，
要求：正确，
},
},
计算：{
userDataTest：{
get:function（）{
返回此.exampleData；
},
set：函数（newValue）{
console.log（newValue）；
返回新值；
},
},
}
挂载（）{
设置超时（（）=>{
log（'立即更改为null！'）；
this.userDataTest=null；
}, 5000);
},

我使用道具获取数据，然后使用getter和setter创建计算方法。我在

中添加了

userDataTest

。并且我使用setter将

this.userDataTest

中的数据（使用

装入的

）更改为null。 在

console.log中（newValue）newValue

是

null

，但在

中没有任何更改，我仍然从getter中获得数据

---

为什么setter不将

中的数据更改为

null

？

您似乎试图通过返回新值来设置计算属性的值，但Vue实际上并没有检查setter的返回值。可能您试图通过计算属性代理

数据
变量。如果是这样，setter应该在setter主体中设置
数据
变量

例如，您的组件可以声明一个名为
userData
，它始终通过一个：

导出默认值{
道具：{
示例数据：对象
},
数据（）{
返回{
用户数据：{}
}
},
观察：{
exampleData（exampleData）{
this.userData=exampleData
}
},
}

然后，您的模板和计算属性将使用
userData
：


{{userData}}
导出默认值{
//...
计算：{
userDataTest：{
得到（）{
返回此.userData
},
设置（新值）{
this.userData=newValue
}
}
}
}

您似乎试图通过返回新值来设置计算属性的值，但Vue实际上并没有检查setter的返回值。可能您试图通过计算属性代理
数据
变量。如果是这样，setter应该在setter主体中设置
数据
变量

例如，您的组件可以声明一个名为
userData
，它始终通过一个：

导出默认值{
道具：{
示例数据：对象
},
数据（）{
返回{
用户数据：{}
}
},
观察：{
exampleData（exampleData）{
this.userData=exampleData
}
},
}

然后，您的模板和计算属性将使用
userData
：


{{userData}}
导出默认值{
//...
计算：{
userDataTest：{
得到（）{
返回此.userData
},
设置（新值）{
this.userData=newValue
}
}
}
}


局部被认为是一种反模式

但是，您可以使用如下所示的，但不能将prop设置为
null
，因为您指定它必须是
对象
类型


Vue.component（'my-component'）{
模板：`{userDataTest}}}`，
道具：{
示例数据：{
类型：对象，
必填项：true
}
},
计算：{
userDataTest：{
get:function（）{
返回此.exampleData
},
set：函数（newValue）{
此.$emit（'update:exampleData'，newValue）
}
}
},
安装的（）{
设置超时（（）=>{
console.log（'Change now！'）
this.userDataTest={}
}, 2500)
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
示例数据：{
福：“酒吧”
}
}
}
})


局部被认为是一种反模式

但是，您可以使用如下所示的，但不能将prop设置为
null
，因为您指定它必须是
对象
类型


Vue.component（'my-component'）{
模板：`{userDataTest}}}`，
道具：{
示例数据：{
类型：对象，
必填项：true
}
},
计算：{
userDataTest：{
get:function（）{
返回此.exampleData
},
set：函数（newValue）{
此.$emit（'update:exampleData'，newValue）
}
}
},
安装的（）{
设置超时（（）=>{
console.log（'Change now！'）
this.userDataTest={}
}, 2500)
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
示例数据：{
福：“酒吧”
}
}
}
})

您的setter除了返回输入值之外什么也不做。仅此一点不会产生任何影响。
this.userDataTest
始终引用从get方法返回的值，该值与
this的值完全相同。exampleData
。你不能变异属性你的setter除了返回输入值之外什么都不做。仅此一项不会产生任何影响。
this.userDataTest
始终引用从get方法返回的值，该值与
this.exampleData
的值完全相同。u不能对属性进行变异