watch 和 watchEffect

watch 和 watchEffect

1. watch 基本使用

watch的基本使用

2. watchEffect 基本使用

watch()是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，希望在创建，就立即执行一次（我们也可以使用watch(),设置{immediate: true}），此时我们可以使用watchEffect侦听器

const url = ref('https://...')
const data = ref(null)

async function fetchData() {
  const response = await fetch(url.value)
  data.value = await response.json()
}

// 立即获取
fetchData()
// ...再侦听 url 变化
watch(url, fetchData)
1
2
3
4
5
6
7
8
9
10
11
12

我们可以用watchEffect函数来简化上面的代码。watchEffect会立即执行一遍回调函数，如果这时函数产生了副作用，Vue会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为

watchEffect(async () => {
  const response = await fetch(url.value)
  data.value = await response.json()
})
1
2
3
4

在这个例子中，回调函数会立即执行。在执行期间，它会自动追踪url.value作为依赖。每当url.value变化时，回调函数会再次执行

注意：watchEffect仅会在其同步执行期间，才会被追踪。在使用异步回调时，只有第一个await正常工作前访问到的属性才会被追踪

3. 区别

watch和watchEffect都能响应式地执行有副作用的回调。它们之前的主要区别是追踪响应式依赖的方式：

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

4. 注意事项

在setup()或

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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

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

// ...当该侦听器不再需要时
unwatch()
1
2
3
4

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

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

watchEffect(() => {
  if (data.value) {
    // 数据加载后执行某些操作...
  }
})
1
2
3
4
5
6
7
8