[JavaScript知识库]vue中监视多个属性，执行同一个方法，初次加载只执行一次

Vue中监视多个属性，执行同一个方法，初次加载只执行一次，防止重复执行

需求：
当form表单的多项内容每一项改变后，都会去请求接口返回实时的数据。

原解决方法：
在watch中分别监视改变的数据，当数据改变时就触发请求的方法。如：

问题：
这样做其实需求功能可以正常实现，但是因为表单中的数据在初始化的时候会反显，所以此时监视到数据变化就会多次触发同一个方法。其实初始化只需要执行一次就可以。

优化方法：
首先将表单中多个需要监视的属性放到计算属性中如：

然后去监视这个添加的计算属性，触发后执行请求的方法，watch中就变成了如下：

这样计算属性和侦听属性的组合使用就优化了我们初始化加载页面时多次请求的问题。