【Vue3+Ts project】认识 watchEffect 、重温 Watch Vue2Vue3区别

目录

Vue2 Watch

Vue3 Watch

Vue3 watchEffect 

---

Vue2 Watch

watch是Vue实例选项之一，用于监听数据的变化并执行相应的回调函数

1. 监听数据变化：watch 可以监听Vue实例中指定的数据属性 当该属性的值发生变化时 会触发回调函数
2. 深度监听：通过设置 `deep` 选项为 `true` 可以深度监听数据对象内部值的变化，而不仅仅是监听对象的引用变化
3. 立即触发回调：通过设置 `immediate` 选项为 `true` 可以在初始渲染时立即触发回调函数 而不需要等待数据变化
4. 监听计算属性：`watch`还可以监听计算属性变化 并在计算属性的值发生变化时 执行回调函数

注意：newValue参数是新值，oldValue参数是旧值，handler 是数据发送变化需要执行的回调函数 他是固定不可改变的

普通监听
 

<script>

export default {
watch: {
  data属性名(newVal,oldVal) {}
}
}
</script>

深度侦听

<script>

export default {

watch:{
     data属性名：{
         deep:true,

         immediate: true,
         handler(newVal,oldVal){ }
     }
   }
}
</script>

Vue3 Watch

Vue3内watch 的功能与Vue2基本相同 但存在一些改进和新增功能

1. 监听多个数据：Vue3内 watch 支持监听多个数据属性 可以使用数组或对象形式传递多个要监听的属性
2. 监听ref和reactive对象：Vue3内引入了 res 和 reactive 用于声明响应式数据 watch 可以直接监听这些响应式对象的变化
3. 监听数组和Map的变化：Vue3内 watch 可以监听数组和Map对象的变化 当数组或Map对象的内容发生变化时 会触发回调函数

注意：被监听ref属性名不需要添加 .value

<script setup lang="ts" name="watch">

import {  watch } from 'vue'

//单个监听

watch( ref属性名 , (newValue,oldVal) => { } )

//多个监听

watch( [ref属性名1,ref属性名2] , (newValue,oldVal) => { } )

//深度监听

watch( [ref属性名1,ref属性名2] , (newValue,oldVal) => { },{ deep: true, immediate: true } )
</script>

Vue3 watchEffect 

watchEffect 是Vue3引用的一个函数 用于处理副作用 他的主要作用是在响应式数据发生变化时自动执行回调函数 并追踪依赖项

1. 自动追踪依赖项：watchEffect 会自动追踪其回调函数 内部使用的响应式数据 如果数据发生变化 他会自动重新执行回调函数 这样确保副作用与其所依赖的数据保持同步
2. 立即执行回调函数：在初始渲染时 watchEffect 会立即执行一次回调函数 这样可以处理初始状态下的副作用
3. 无须手动指定依赖项：相比传统的 watch 不需要手动指定要监听的数据 watchEffect 会根据回调函数内部的代码自动追踪依赖项
4. 处理多个副作用：可以在同一组件中多次使用 watchEffect  来处理不同的副作用 每个 watchEffect 都可以独立追踪自己的依赖项
5. 清理副作用：当组件销毁时 watchEffect 会自动清除副作用 避免潜在的内存泄漏

watchEffect 提供了一种简洁 自动追踪依赖项的方式来处理副作用 使开发者能够方便的编写响应式代码和处理副作用逻辑

<script setup lang="ts" name="watchEffect">

import { ref, watch } from 'vue'

watchEffect(() => { console.log(`开始监听：`, ref属性名.value) })

</script>