vue watch监听多个数据-蒲公英云

vue watch监听多个数据

桃扇骨 2023-09-23 22:41 75阅读 0赞

项目驱动

在自己工作的某个项目中，之前基本都是使用watch监听单个数据。
但是后面在一个echarts的项目中，使用了三个echarts图表，而三个图表需要根据用户的选择条件同时更新，而后端传过来的数据我们需要分割成两个数组，这个时候，单独监听一个数组已经达不到项目需求了，但是使用两个watch单独监听两个数据又让代码显得很冗余。于是，有了使用watch监听两个数据的想法。下面看看代码吧

单个数据监听方法

单个监听方法这里就不多说了吧，看看代码，很简单的

import {
      watch } from "vue";
watch(
()=>data,
(prv,next)=>{
console.log(next,prv
)})//data为需要监听的变量

多个数据监听方法

多个数据监听，其实和我们单个数据监听差不多，只是多了一个中括号[ ]（把需要监听的参数放入数组内）

import {
      watch } from "vue";
watch(
() => [data, data1,data2], //同一个组件中需要监听的多组数据
([nexData1, nexData2,nexData3],[preData1,preData2,preData3]) => {
  console.log(nexData1, nexData2,nexData3)//更新后的数据
  console.log(preData1,preData2,preData3)//更新前的数据，这个我们基本不用，那上面的监听函数的第二个数组可以直接去掉。如果需要则另论
})