Javascript 忽略VueJs深度监视中的某些属性

我正在为vue应用程序开发一个自动保存功能，该功能在每次更改vue应用程序数据时将数据发送到api。使用vue手表时是否可以忽略对象的某些属性？该对象有多个值，我希望监视以自动保存，并且只有1或2个值将被忽略，因此为我想要的所有属性设置监视函数似乎没有意义，而只是忽略我不需要的1

这是数据的基本结构：

data:{
  template: {
    name: "Template",
    id: 1,
    variables: [
      {
        name: "v1",
        color: "#fff",
        group: 1,
        isSelected: true
      },
      {
        name: "v2",
        color: "#fff",
        group: 3,
        isSelected: false
      }
    ]
  }
}

以及基本的手表功能：

watch: {
  template: {
    handler: function(){
      this.save();
    },
    deep: true
  }
}

模板中变量的isSelected字段仅用于UI目的，我希望手表忽略该字段的更改，因为它们不会被保存。我不想为变量中的每个字段设置watch函数，而是在watch中执行以下操作：

ignore: "template.variables.isSelected"

---

您无法获取突变对象的旧值，因此我认为创建一些助手数据如下

temp（保存旧数据）

将有助于解决您的问题。然后检查旧数据和新数据

var-app=新的Vue({
el:“应用程序”，
数据：{
答:1,，
模板：{
名称：“模板”，
id:1，
变量：[
{
名称：“v1”，
颜色：“fff”，
组别:1,，
是的
},
{
名称：“v2”，
颜色：“fff”，
组别:3,，
结果：错
}
]
},
温度：{}
},
挂载：函数（）{
//this.template.variables[0]。isSelected=false；
this.temp=JSON.parse（JSON.stringify（this.template））；
this.$set（this.template.variables[0]，“isSelected”，222）；
},
观察：{
模板：{
处理程序：函数（changeVal）{
var标志=真；
for（changeVal.variables中的变量i）{
if（changeVal.variables[i].isSelected！=此.temp.variables[i].isSelected）{
flag=false；
}
}
this.temp=JSON.parse（JSON.stringify（this.template））；//为下一个进程重新分配更改的数据作为旧数据
if（flag）console.log（“saveData”）；//this.save（）；
else console.log（“notsave”）；
},
深：是的
}
}
});

我认为这是不可能的，通常情况下，将持久化的数据与临时UI状态混合使用不是一个好主意。如果你能忍受重构的痛苦，你可以将isSelected存储在一个单独的结构中，而不被监视？它可以是一个与“变量”具有相同索引的数组，也可以是某种以键为名称的映射。api使用一个参数白名单，因此无论我是否尝试持久化isSelected字段，api都会将其删除。我考虑过创建一个不包含isSelected字段的computed属性来监视，但是忽略单个字段似乎会带来很大的开销。我希望有一个更简单的方法来做这件事。有两种方法：用计算机计算或分别列出所有你正在观察的属性：
watch:{'template.a{}，'template.b':{}}
在这里你省略了你不想要的属性。另一个选项是使用
handler（newVal，oldVal）{const diffs=getDiffs（newVal，oldVal）{}
，如果需要，getDiffs可以递归。没有简单的方法，这在很大程度上取决于数据的结构和大小。在像您这样的情况下，巧妙地使用lodash会有很大帮助，但大多数此类问题都可以通过sane数据体系结构解决。根据您的描述和显示的数据，您应该使用一个计算的忽略删除。除非我们讨论的是上万条或更多的记录，否则开销可以忽略不计。或者，让我这样说：观看deep的开销远远高于克隆和删除一些属性的开销。