Vue.js vue js使用单个处理程序监视多个属性

目前我要看几部电影。如果它们每个都改变了，我必须调用相同的函数：

导出默认值{
//……代码的其余部分
观察：{
propa：功能（之后、之前）{
剂量（之后、之前）；
},
propb：功能（之后、之前）{
剂量（之后、之前）；
}
//……等等
}
}

因此，我不得不在上面多次编写相同的代码。 是否可以简单地监视所有属性并调用它们的更改处理程序，而不必多次编写相同的代码

---

PS：我正在使用vue 1.x

首先，您的定义可以简化

doSomething

似乎不是Vue上的一种方法，因此您的手表可能只是

watch:{
    propa: doSomething,
    propb: doSomething
}

其次，有时候记住Vue定义对象只是普通的javascript对象很重要。它们可以被操纵

如果希望查看数据对象中的每个属性，可以执行以下操作

function doSomething(after, before){
  console.log(after,before);
}

function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  for (let prop of Object.keys(def.data))
    def.watch[prop] = doSomething;
  return def;
}

let vueDefinition = {
  data:{
    propa: "testing",
    propb: "testing2",
    propc: "testing3"
  }
}

export default buildWatch(vueDefinition)

如果您只想查看某些已定义的属性列表：

// First argument is the definition, the rest are property names
function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  const properties = Array.prototype.slice.call(arguments,1); 
  for (let prop of properties)
    def.watch[prop] = doSomething;
  return def;
}

export default buildWatch(vueDefinition, "propa", "propb")

---

更新：2020年4月

对于使用Vue 3的用户，watch API可以接受多个源

从“vue”导入{watch，ref}；
导出默认值{
设置（（）=>{
常数a=ref（1），b=ref（“你好”）；
手表（[a，b]，（[newA，newB]，[prevA，prevB]）=>{
//你想干什么就干什么
});
});
};

---

Vue 2的原始答案

没有正式的方法来解决您的问题（）。但您可以使用计算属性作为技巧：

导出默认值{
// ...
计算：{
PropertyA和PropertyB（）{
返回`${this.propertyA}`${this.propertyB}`；
},
},
观察：{
属性A和属性B（新值、旧值）{
const[oldPropertyA，oldProvertyB]=oldVal.split（“|”）；
常量[newPropertyA，newProvertyB]=newVal.split（“|”）；
//剂量
},
},
}

如果你只是想做点什么，而不在乎什么是新的/旧的价值观。 忽略两行

const[oldPropertyA，oldProvertyB]=oldVal.split（“|”）；
常量[newPropertyA，newProvertyB]=newVal.split（“|”）；

另一种可能性：

newvue({
el:“#应用程序”，
数据：{
名字：“爱丽丝”，
姓：“史密斯”，
全名：'//IRL您可能会为此使用计算机，我正在使用手表更新它，只是为了演示如何使用它
},
安装的（）{
this.$watch（vm=>[vm.name，vm.name]，val=>{
this.fullName=this.name+“”+this.姓氏；
}, {
立即：true，//立即运行
deep:true//检测对象内部的更改。此处不需要，但在其他情况下可能需要
}) 
}
});

姓名：
姓：
全名：{{fullName}
像这样：

data() {
  return {
    propa: '',
    propb: ''
  }
},
computed: {
  changeData() {
    const { propa, propb } = this
    return {
      propa,
      propb
    }
  }
},
watch: {
  changeData: {
    handler: function(val) {
      console.log('value change: ', val)
    },
    deep: true
  }
}

对于Vue typescript，您可以这样做。测试

  @Watch('varA')
  @Watch('varB')
  private oneOfAboveChanged(newVal) {
    console.log(newVal)
  }

我的vue2解决方案：

export default {
  data() {
    return {
      status: null,
      name: null,
      date: null,
      mobile: null,
      page: 1,
    }
  },
  watch: {
    ...["status", "name", "date", "mobile", "page"].reduce((acc, currentKey) => {
      acc[currentKey] = (newValue) => {
        // doSomething
        // console.log(newValue, currentKey)
      }
      return acc
    }, {}),
  }
}

取决于数据的结构。如果你将关注的数据放在一个对象中，你可以用deep:true属性观察单个对象，并触发该方法。你也可以观察整个数据对象，但我不建议这样做。我不认为有什么方法可以像讨论的那样，你可以按原样创建一个计算属性，但这也不是很干净。这对我非常有帮助，但是应该注意的是，我正在观察一个对象数组，为此我需要添加
{deep:true}
官方Vue JS文档在这个主题上实际上非常有用：@JohnMellor好的，很高兴知道。在上面的示例中，我添加了链接和
deep:true
，以防您在4月份更新，我对使用这种方法很感兴趣，但无法找到文档，因为我无法获得正确的语法，只能找到和的文档，但这两个文档都没有显示我需要的语法。需要以下语法：
export default{watch:{--watcher for multiple props here--}
使用vue 2和composition api插件，它与返回要监视的值数组的函数一起工作：
watch（（）=>[a，b]，…）
使用vue 2，我在控制台watch方法中获得的任何属性时获得[Object Object]。我猜它不起作用了？你可以简单地返回一个要跟踪的项目数组
changeData（）{return[this.propa，this.propb]}