zxd's Blog

Appearance

https://cn.vuejs.org/guide/essentials/watchers.html

当需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。 在组合式 API 中，我们可以使用 watch函数 在每次响应式状态发生变化时触发回调函数：

基本用法 ​

watch侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。 watch一般接收两个参数

  1. 第一个参数：要监听的数据源 或者 数据的getter函数
  2. 第二个参数：当数据变化时要执行的回调函数 （newVal, oldVal）=> { ... }
  3. 第三参数
    1. { deep: true } 深层
    2. { immediate: true } 立即执行一次
    3. { once: true } 只在源变化时触发一次
    4. {flush: 'post'}watch回调可以访问dom更新之后数据
typescript
import { watch, ref } from 'vue';

const count = ref<number>(0);

watch(count, (newValue, oldValue) => {
  console.log(`count 值变化：${oldValue} -> ${newValue}`);
});

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

监听单个ref ​

typescript
watch(count, (newVal, oldVal) => {
  console.log('old count', oldVal)
  console.log('new count', newVal)
  document.title = `目前点击次数是：${newVal}`
})

监听响应式对象的属性 ​

不能直接监听响应式对象的属性有两种方式，

  1. 属性的getter函数
  2. 完整对象
typescript
const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})
  1. 第一个参数 传 要监听属性的getter函数 () => obj.prop
typescript
const user: Person = reactive({
  name: 'sunflow',
  age: 18
})

// 监听响应式对象的单个属性，
// 箭头函数 传响应式对象的getter函数
watch(() => user.age, (newVal,oldVal) => {
  console.log('user.age', newVal)
})
  1. 第一参数，传入完整的obj
typescript
watch(user, (newVal,oldVal) => {
  console.log('user.age', newVal.age)
})
// 这时候会隐式的深层次监听user

监听数组 ​

typescript
watch([count, () => user.age], (newVal, oldVal) => {
  // oldVal, newVal返回的也是数组
  console.log(`old arr`, oldVal)
  console.log('new arr', newVal)
})

第三参数 ​

深层监听 ​

直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：

typescript
const obj = reactive({ count: 0 })

watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++

显示deep ​

typescript
// eg1.
watch(
  () => state.someObject,
  () => {
    // 仅当 state.someObject 被替换时触发
  }
)

// eg2.
watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
  },
  { deep: true }
)

立即执行 ​

watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。

typescript
watch(
  source,
  (newValue, oldValue) => {
    // 立即执行，且当 `source` 改变时再次执行
  },
  { immediate: true }
)

一次性 ​

每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，请使用 once: true 选项。版本3.4+

typescript
watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true }
)

回调的触发时机 ​

默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。 如果想在watch回调中访问被 Vue 更新之后的所属组件的 DOM，需要指明 flush: 'post'

typescript
watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

watchEffect ​

watchEffect 函数只接受一个回调函数作为参数，而不接受明确的数据源。它会立即执行一次回调函数，并自动追踪其中所使用的任何响应式数据。 watchEffect() 允许我们自动跟踪回调的响应式依赖

typescript
const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)
// => 改下为下面的watchEffect

watchEffect简写, 不需要写源数据todoId,也不需要写立即执行， 在执行期间，watchEffect会自动追踪 todoId.value 作为依赖（和计算属性类似）

typescript
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

什么时候用？ ​

如果需要侦听一个嵌套数据结构中的几个属性，watchEffect() 可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性 Tip watchEffect 仅会在其同步执行期间，才追踪依赖。在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪。

watch vs watchEffect ​

它们之间的主要区别是追踪响应式依赖的方式：

  1. watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西
  2. watchEffect会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。
  3. watchEffect更适合于执行副作用代码，不需要关心具体数据的变化情况

watchPostEffect ​

typescript
watchEffect(callback, {
  flush: 'post'
})
// 下面的pwatchPostEffect等效

后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：

typescript
import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

watchSyncEffect ​

同步侦听器不会进行批处理，每当检测到响应式数据发生变化时就会触发。可以使用它来监视简单的布尔值，但应避免在可能多次同步修改的数据源 (如数组) 上使用

typescript
watchEffect(callback, {
  flush: 'sync'
})

// ==> 

import { watchSyncEffect } from 'vue'

watchSyncEffect(() => {
  /* 在响应式数据变化时同步执行 */
})

副作用 ​

"副作用"（side effect）通常指的是某个函数在执行过程中对程序状态的修改，或者与外部环境交互的行为。 对程序状态造成影响，改变函数的输出等叫做副作用 在 Vue 中，watchEffect 中的副作用指的是回调函数中对

  1. 响应式数据进行修改（读取严格意义上不算）
  2. 执行界面更新、
  3. 网络请求等相关

修改响应式数据 ​

typescript
import { watchEffect, ref } from 'vue';

const count = ref(0);

watchEffect(() => {
  // 修改响应式数据，会触发重新渲染
  count.value++;
});

在某些上下文中，读取响应式数据可能会被认为是副作用，因为它表明函数依赖于外部状态（即响应式数据），从而导致函数的行为不是完全纯粹的，但在 Vue 中的 watchEffect 中，读取响应式数据通常不被认为是严格意义上的副作用

更新dom ​

typescript
import { watchEffect, ref } from 'vue';

const count = ref(0);

watchEffect(() => {
  // 执行界面更新
  document.title = `Count: ${count.value}`;
});

网络请求 ​

typescript
import { watchEffect, ref } from 'vue';

watchEffect(() => {
  // 与外部环境交互，比如执行一些网络请求
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => {
      // 处理获取到的数据
    });
});