Why

• 补充前述的没有学完的监视

How

• 在使用watch的时候，需要显示的指定说监视的内容，但是使用watcheffect是自动帮你判断监视的内容，个人觉得这个比watch更好用，以下是个简单的例子对比。

let water = reactive({

  temp: 10,

  height: 0,

});

  

// watch(

//   () => water,

//   (newValue, oldValue) => {

//     let { temp, height } = newValue;

//     if (temp >= 60 || height >= 80) {

//       console.log("水温或水位过高", temp, height);

//     }

//   },

//   { deep: true }

// );

  

watchEffect(() => {

  if (water.temp >= 60 || water.height >= 80) {

    console.log("水温或水位过高", water.temp, water.height);

  }

});

<h2>水温：{{ water.temp }}</h2>

<h2>水位：{{ water.height }}</h2>

<button @click="water.temp += 10">增加水温</button>

<button @click="water.height += 10">增加水位</button>

• 可以看到两种方式的写法不同之处。