Vue监听器(上)之组合式watch

1. 定义监听器

//要监视的属性被改变时触发
watch(
  要监视的属性, 
  (更改后的心值, 更改前的旧值) => {
    具体操作
  },
);

//监视对象为getter的时候
//表达式内任意响应式属性被改变时触发
watch(
  () => return表达式, 
  (表达式的新值, 表达式的旧值) => {
    具体操作
  }
);

//数组中任意下标数据被改变时触发
watch(
  value1, value2,....], 
  ([value1改变后的值, value2改变后的值,...valuen改变后的值]) => {
    具体操作
  }
);

//对象内任意属性被改变时
watch(obj对象, (对象的新值, 对象的旧值) => {
  具体操作,但需要注意这时对象的新值和对象的旧值是相等的,显示对象新值
});

//当对象下某个属性发生改变时,监视对象下某一属性
watch(
  () => 对象的属性,
  (对象属性的新值, 对象属性的旧值) => {
    具体操作
  }
);

//使用watchEffect监视
watchEffect(()=>{
  函数式,在函数式中定义的属性被改变时触发
})

2. 监听器的配置项

开启深层监听:deep: true
强制监视器立即执行:immediate: true
一次性监听:once: true
监听器回调中访问被vue更新之后的所有组件dom:flush: ‘post’
同步触发监听器,会在Vue进行任何更新之前触发:flush: ‘sync’

3. 监听器实例

<template>
  <div>{{ count }}</div>
  <br />
  <button @click="addcount">count++</button>
  <br />
  <div>{{ obj.nums }}</div>
  <br />
  <button @click="addobjnums">obj.nums++</button>
  <br>
  <button @click="addobjnums2">obj.nums2++</button>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
name: "App";
let count = ref(0);
let x = ref(5);
let obj = reactive({
  nums: 1,
  nums2: 2,
});

//使用immediate: true 配置项实现在页面初始化时就执行此监视属性
watch(
  count, 
  (newValue, oldValue) => {
    console.log("---------这个是页面初始化出来的/如果你第二次看见我则是count值发生改变时看到的------");
    console.log("count原始值:", oldValue);
    console.log("count更改后的值:", newValue);
  },
  { immediate: true }
);

//单纯监视count是否有变化,
//监视函数会获得俩个参数,第一个为更新后的值,第二个为更新前的值
watch(count, (newValue, oldValue) => {
  console.log("----------------------------监视单个ref-----------------------");
  console.log("count原始值:", oldValue);
  console.log("count更改后的值:", newValue);
});

//监视对象为getter的时候
watch(
  () => count.value + x.value,
  (newValue, oldValue) => {
    console.log(
      "----------------------------监视getter函数-----------------------"
    );
    console.log("getter原始值:", oldValue);
    console.log("count更改后getter函数的值:", newValue);
  }
);

//监视对象来源于一个数组,没有找到获取原来值的写法
watch([count, () => x.value + 1], ([newCount, newX]) => {
  console.log(
    "-----------------------监视多个来源组成的数组-------------------"
  );
  console.log("count更改后的值:", newCount);
  console.log("x+1后的值:", newX);
});

//当监视对象为整个对象时
//这时newValue和oldValue是相等的,因为是同一个对象
watch(obj, (newValue, oldValue) => {
  console.log(
    "----------------------------监视整个对象时-----------------------"
  );
  console.log("obj原始值:", oldValue);
  console.log("obj更改后的值:", newValue);
});

//当监视对象为对象属性时,需监视其对象属性的getter函数
//这个触发条件仅仅是obj.nums被修改的时候出发
watch(
  () => obj.nums,
  (newValue, oldValue) => {
    console.log(
      "----------------------------监视对象下单个属性-----------------------"
    );
    console.log("obj.nums原始值:", oldValue);
    console.log("obj.nums更改后的值:", newValue);
  }
);

//看起来是监视了obj对象下的nums属性,
//其实是通过deep:true选项开启了深层监听器
//其返回的原值和新值为obj对象的值,而不是obj.nums单个
//注意这个非常耗费资源,是遍历实现的
watch(
  () => obj.nums,
  (newValue, oldValue) => {
    console.log(
      "------------开启深层监听器检测obj下的所有属性只要其中一个发生改变就会输出整个obj对象------------"
    );
    console.log("obj原始值:", oldValue);
    console.log("obj更改后的值:", newValue);
  },
  { deep: true }
);

//使用once: true 配置项实现此监视只执行一次
watch(
  count, 
  (newValue, oldValue) => {
    console.log("---------这个只会看到一次------");
    console.log("count原始值:", oldValue);
    console.log("count更改后的值:", newValue);
  },
  { once: true }
);

//使用watchEffect可以不写监视属性
//在匿名函数中存在的属性被修改时会触发
watchEffect(()=>{
  count.value++
})

function addcount() {
  count.value++;
}
function addobjnums() {
  obj.nums++;
}
function addobjnums2() {
  obj.nums2++;
}
</script>

<style scoped>
</style>

4. 监听器其他
watchEffect()

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(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

Post Watchers​
如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: ‘post’ 选项：

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

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

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

import { watchPostEffect } from 'vue'

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

同步侦听器
你还可以创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发：

watch(source, callback, {
  flush: 'sync'
})

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

同步触发的 watchEffect() 有个更方便的别名 watchSyncEffect()：.

import { watchSyncEffect } from 'vue'

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

停止侦听器
在 setup() 或

一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：

<script setup>
import { watchEffect } from 'vue'

// 它会自动停止
watchEffect(() => {})

// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：

// 需要异步请求得到的数据
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // 数据加载后执行某些操作...
  }
})