Vue3之计算属性与侦听器

计算属性-computed:仅会在其响应式依赖更新时才重新计算

1、模板中的表达式虽然方便，但模板中写太多逻辑，会让模板变得臃肿，难以维护。
2、computed具有缓存作用。

侦听器-watch&watchEffect:在每次响应式状态发生变化时触发回调函数

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态

• watch

• watchEffect
  我认为watchEffect可以看做成watch+immediate: true+computed触发机制的合写

// 这里不同的是，watchEffect第一个参数不需要写监听的源
// 这个例子回调会立即执行，相当于immediate: true
watchEffect(async () => {
  const response = await fetch(
    // 这里有点像computed:每当 todoId.value 变化时，回调会再次执行
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
})

• watch vs watchEffect
  相同点：都能响应式地执行有副作用的回调
  不同点：watch只追踪明确侦听的数据源，比如说我监听obj，只能监听obj的属性变化，但是watchEffect里面既可以监听obj的属性变化，也可以监听其他对象的属性变化。简单说，watch追踪更加明确，而watchEffect则不太明确。
• 回调的触发时机
  当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。默认情况下，侦听器回调的触发在DOM更新之前，这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，可通过如下配置：

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

// 后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()
import { watchPostEffect } from 'vue'
watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

• 停止侦听器

const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()