watch/watchEffect

watch 和 watchEffect 区别

watchEffect 与 watch 有什么不同？

第一点我们可以从示例代码中看到 watchEffect

不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性,那么当这些属性变更的时候，这个回调都会执行，

而 watch只能监听指定的属性而做出变更(v3开始可以同时指定多个)

第二点就是 watch 可以获取到新值与旧值（更新前的值），而 watchEffect是拿不到的。

第三点是 watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖（与 computed

同理），而后收集到的依赖发生变化，这个回调才会再次执行，而 watch 不需要，因为他一开始就指定了依赖。

stop : stop 其实是vue的内置stop函数

总结:

watch : 不会监听默认值,可以获取到新值与旧值（更新前的值）

watchEffect : 可以监听默认值,没有新值与旧值的概念

<template>
  <div>
    <van-button type="primary" @click="clickVuex">点击执行VUEX</van-button>
    <van-button type="success">我是vuex修改的值----{{getIndex}}</van-button>
    <van-button type="warning" @click="stopwatch">停止监听</van-button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  watchEffect,
  WatchStopHandle
} from "vue";
import { useStore, Store } from "vuex";
import { Button, Toast } from "vant";
interface Reactive {
  value: number;
  getIndex: number;
  clickVuex: () => void;
}
export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  },
  components: {
    [Button.name]: Button
  },
  setup() {
    const store: Store<any> = useStore();
    const state: Reactive = reactive({
      value: 0,
      getIndex: computed(() => {
        return store.getters.getClickIndex;
      }),
      clickVuex: () => {
        state.value = store.getters.getClickIndex * store.getters.getClickIndex;
        store.dispatch("clickIndex");
      }
    });

    定义一个监听器
    watchEffect(() => {
      console.log(`effect 触发了！${state.value}`);
    });

     定义一个监听器
    const stop: WatchStopHandle = watch(state, (newVal, oldVal): void => {
      console.log("watch ", newVal.value, "newVal");
      console.log("watch ", oldVal.value, "oldVal");
    });

     停止监听
    const stopwatch = (): void => {
      console.log(state, "state")
      stop(); 在这个地方是通过函数表达式调用stop来停止watch
      state.clickVuex = () => void stop()  如果想停止一个事件的时候 通过vue的内置 stop 函数来执行
      Toast.success("停止成功");
    };

    return {
      ...toRefs(state),
      stopwatch
    };
  }
});
</script>