如何使 Vue 3 道具对象反应？

【问题标题】：How to make Vue 3 props objects reactive?如何使 Vue 3 道具对象反应？
【发布时间】：2022-01-12 18:35:45
【问题描述】：

这段代码来自VueMastery课程，一定是过时的：

export default {
  setup(props, {emit}){
    let email = props.email;
    let toggleRead = () => {
      email.read = !email.read
      axios.put(`http://localhost:3000/emails/${email.id}`, email)
    }
  ...

它给出了这个错误：

   71:9   error  Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity  vue/no-setup-props-destructure

请注意，我在这里不是在处理 const 。在 Vue 3 中使 prop 值反应的正确方法是什么？

【问题讨论】：

使用toRefs
或者根据props创建一个计算值

标签： vue.js vuejs3

【解决方案1】：

这个警告是由应该提高代码质量的 linter 规则引起的。如果知道某个 prop 在组件实例的生命周期内没有更改，则可以将其禁用。

这里的问题是代码改变了一个 prop，这被认为是一种不好的做法，可能会触发另一个警告。

对于 prop 值的单向更改，即父母不知道它：

const toggleRead = () => {
  const email = { ...props.email, read: !email.read };
  axios.put(`http://localhost:3000/emails/${email.id}`, email)
}

对于双向变化：

const toggleRead = () => {
  ...
  emit('emailUpdate', email);
}

父母应该监听emailUpdate 事件并相应地更新其状态。

【讨论】：