watch 和 watchEffect 的区别

watch

(1) watch监听一个数据

<template>
  <div>
    <input type="text" v-model="text" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
let text = ref<String>('')
watch(text, (newV, oldV) => {
  console.log('newV', newV, 'oldV', oldV)
})
</script>
<style lang="scss" scoped></style>

(2)watch监听多个数据，使用数组

<template>
  <div>
    <input type="text" v-model="text" />
    <input type="text" v-model="text2" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
let text = ref<String>('')
let text2 = ref<String>('')
watch([text, text2], (newV, oldV) => {
  console.log('newV', newV, 'oldV', oldV)
})
</script>
<style lang="scss" scoped></style>

(3 )watch监听深层次对象

• 监听深层次对象时，新旧对象的值都会发生变化
• 使用deep为深层次监听
• 使用 immediate // watch 第一次直接触发
  (默认watch第一次不触发的)，则设置第一次触发

<template>
  <div>
    <input type="text" v-model="text.info.age" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
let text = reactive({
  info: {
    age: 20,
  },
})
watch(
  text,
  (newV, oldV) => {
    console.log('newV', newV)
    console.log('oldV', oldV)
  },
  {
    deep: true, // 深层次监听
    immediate: true, // watch 第一次直接触发 (默认watch第一次不触发的)
  }
)
</script>
<style lang="scss" scoped></style>

(4)watch监听对象的某一个值

<template>
  <div>
    <input type="text" v-model="text.info.age" />
    <input type="text" v-model="text.info.name" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
let text = reactive({
  info: {
    age: 20,
    name: 'ppp',
  },
})
watch(
  () => text.info.age,
  (newV, oldV) => {
    console.log('newV', newV)
    console.log('oldV', oldV)
  }
)
</script>
<style lang="scss" scoped></style>

watchEffect高级监听器

• watchEffect是非惰性的，一开始的时候已收集依赖，会自动调用一次 （watch是惰性的）
• watchEffect只能取到最新的（watch可以新旧值）
• watchEffect会在初始化的时候执行一次，类似computed,但是computed若是值没有被使用时不会调用，但是watchEffect始终会调用一次

(1)校验非惰性

<template>
  <div class="app-container home">
    <el-input
      v-model="num"
      auto-complete="off"
      placeholder="请输入验证码"
      size="large"
      class="yzm"
    />
    <button @click="countAdd">点击</button>
  </div>
</template>

<script setup name="Index">
  const num = ref(0);
  watch(num, (val) => {
    //只有值改变才执行
    console.log(val);
  });
  const countAdd = () => {
    num.value++;
  };
  watchEffect(() => {
    // 初始化和值改变都执行
    console.log('新的值:', num.value);
  });
</script>

(2)watchEffect之 停止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
在一些情况下，也可以显式调用返回值以停止侦听

<template>
  <div>
    <input type="text" v-model="text" />
    <button @click="stop">停止监听</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听

const stopWatch = watchEffect((oninvalidata) => {
  console.log('text', text.value)
  oninvalidata(() => {
    // 先执行的 清楚副作用
    console.log('before')
  })
})
// 停止监听
const stop = () => stopWatch()
</script>
<style lang="scss" scoped></style>

(3 )watchEffect 的执行时机

• pre 组件更新前；
• sync：强制效果始终同步；
• post：组件更新后执行

<template>
  <div>
    <input id="ipt" type="text" v-model="text" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听

const stopWatch = watchEffect(
  (oninvalidata) => {
    console.log('text', text.value)
    oninvalidata(() => {
      // 先执行的 清楚副作用
      console.log('before')
    })
  },
  {
    flush: 'post', // dom加载完毕后 执行
    // pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
  }
)
</script>

(4)watchEffect 的副作用

什么叫副作用？

一个函数运行后影响其外部。
简单的理解：如果watchEffect中，写了异步请求的代码，当watchEffect被多次调用时，就会重复执行异步请求；

清除副作用？

可以使用onInvalidate方法，终止之前的请求

实例

如果不处理，则会多次发送请求：

(5)watchEffect 的debugger状态

<template>
  <div>
    <input id="ipt" type="text" v-model="text" />
    <button @click="stop">停止监听</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue'
let text = ref<String>('小小')
// 非惰性的 一开始的时候 已经执行监听

const stopWatch = watchEffect(
  (oninvalidata) => {
    console.log('text', text.value)
    // let ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement // (as HTMLInputElement 断点)
    // console.log('ipt', ipt)

    oninvalidata(() => {
      // 先执行的 清楚副作用
      console.log('before')
    })
  },
  {
    flush: 'post', // dom加载完毕后 执行
    // pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
    onTrigger(e) {
      debugger // 用于debugger 调试
    },
  }
)
// 停止监听
const stop = () => stopWatch()
</script>
<style lang="scss" scoped></style>

watch 和 watchEffect 的区别

watch 特点
watch 监听函数可以添加配置项，也可以配置为空，配置项为空的情况下，watch的特点为：

• 有惰性：运行的时候，不会立即执行；
• 更加具体：需要添加监听的属性；
• 可访问属性之前的值：回调函数内会返回最新值和修改之前的值；
• 可配置：配置项可补充 watch 特点上的不足：
  immediate：配置 watch 属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为 false 时，保持惰性。
  deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。

watchEffect 特点

• 非惰性：一旦运行就会立即执行；
• 更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；
• 不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；