温故而知新（03)------ watch vs watcheffect

前言

由于之前一直使用watch，不怎么使用watchEffect,今天就来简单的看下两者的不同之处

watch

先从简单的代码的使用方法看起：

<script setup>
import {watch, ref, reactive, computed} from "vue";

const name = ref('小红');

setTimeout(() => {
  name.value = '小白'
}, 2000)
watch(name, (newval, oldval) => {
  console.log(newval, oldval)
}, {
  deep: false,
  immediate: false
})
</script>
<template>
  <div>
    123456.吐槽，你不说我怎么知道啊
  </div>
</template>

watcht简单的监听只需要三个参数：

1.监听的对象 2.监听后的回调函数，第一个值是新值，第二个值是老值 3.监听时的触发选项，是否深度监听和是否立即监听

监听对象中的某个key：

1.方便的做法是在选项中使用深度监听，配置：{deep:true}这样就可以监听到整个对象是发生了变化的。

2.直接监听对象的某个值，这样还能节约性能。

代码演示如下：

<script setup>
import {watch, ref, reactive, computed} from "vue";
const TestObj = ref({
 name:'小红娘',
 age:18,
})

watch(TestObj.value.name,(newval,oldval)=>{
 console.log(newval,oldval)
})
setTimeout(() => {
 TestObj.value.name = '小白'
 console.log(11)
}, 2000)
</script>
<template>
 <div>
   123456.吐槽，你不说我怎么知道啊
 </div>
</template>

运行效果如下,并未打印新旧值

这样的方式不允许我们在vue3中使用，我们在监听某个对象的值时，需要用getter方法导出。

完整代码如下：

<script setup>
import {watch, ref, reactive, computed} from "vue";
const TestObj = ref({
  name:'小红娘',
  age:18,
})

watch(() => TestObj.value.name,(newval,oldval)=>{
  console.log(newval,oldval)
})
setTimeout(() => {
  TestObj.value.name = '小白'
  console.log(11)
}, 2000)
</script>
<template>
  <div>
    123456.吐槽，你不说我怎么知道啊
  </div>
</template>

运行结果如下：

watchEffect

watchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。 也就是说，wactheffect会自动收集函数中的响应式依赖，并且初始化运行一次该函数（相当于watch开启了immediate：true）

举例代码如下：

<script setup>
// import {watch, ref, reactive, computed} from "vue";
// const TestObj = ref({
//   name:'小红娘',
//   age:18,
// })
//
// watch(() => TestObj.value.name,(newval,oldval)=>{
//   console.log(newval,oldval)
// })
// setTimeout(() => {
//   TestObj.value.name = '小白'
//   console.log(11)
// }, 2000)

import { ref, reactive, watch, watchEffect } from 'vue';
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watchEffect(() => {
  console.log('-----', single.test.a);
});

</script>
<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

代码初始化运行如下：

当我们点击时如下：

值得注意的是，watcheffect只能获取到最新的值（在函数中直接访问），而不像watch那样可以拿到新值和旧值。

注意：watchEffect在监听数据时，同步函数发生变化时只触发一次监听

代码如下：

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.test.a }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch, watchEffect } from 'vue';
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const countDom = ref(null);
const handleClick = function () {
  single.test.a++;
};
watchEffect(() => {
  console.log(countDom.value);
  console.log('-----', single.test.a);
});
</script>

<style>
.mine-box {
  text-align: center;
}
</style>

当我们点击按钮时，运行效果如下：

可以看到函数只是运行了一次。

watcheffect入参： onInvalidate

onInvalidate在值即将发生改变时发生一次调用

代码如下:

<script setup>
import {  reactive,  watchEffect } from 'vue';
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
const stop = watchEffect(onInvalidate => {
  console.log('--监听执行---', single.test.a);
  if (single.test.a > 5) {
    stop();
  }
  onInvalidate(()=>{
    console.log("看好了，我是在属性值发生改变前而触发的")
  })
});

</script>
<style>
.mine-box {
  text-align: center;
}
</style>
<template>
  <div class="mine-box">
    123456
    <button @click="handleClick">按钮</button>
  </div>
</template>

初始化如下：

当我们在点击 按钮时发生如下变化：

销毁监听

watchEffect所在的组件被卸载时 会隐式调用stop函数停止侦听。

通过显示调用返回值停止侦听

const stop = watchEffect(onInvalidate => {
  console.log('--监听执行---', single.test.a);
  if (single.test.a > 5) {
    stop();
  }
});

const name = ref('小红')

const stop = watch(name, ()=>{
  console.log(name.value)
});

setTimeout(()=>{
  stop()
},1000)
setTimeout(()=>{
  name.value = '111'
  console.log(name)
},2000)

总结：

watch 和 watchEffect 的主要功能是相同的，都能响应式地执行回调函数。

依赖收集	执行时机	监听对象	返回值
watcheffect	初始化时就收集，并立即执行回调函数	可以没有具体的监听对象	可以没有返回值
watch	初始化时收集，默认当依赖有变更才执行回调函数	必须要有具体的监听对象	有返回值（新值和旧值）
computed	初始化时收集，默认当依赖有变更才执行回调函数	需要具体的对象	返回的是计算属性值（必须有返回）