O que é efeito de relógio

pessoa github

watchEffecté uma função da API de composição no Vue 3, usada para executar uma função imediatamente e rastrear suas dependências de forma responsiva. A função é executada novamente automaticamente quando uma dependência (referência reativa ou propriedade computada) é alterada.

Isso é um pouco diferente do Vue 2 watch, pois watchnormalmente é usado para observar uma única propriedade reativa ou propriedade computada, enquanto watchEffectmúltiplas dependências reativas podem ser rastreadas automaticamente.

Uso básico

import {
    
     ref, watchEffect } from 'vue';

export default {
    
    
  setup() {
    
    
    const count = ref(0);
    const doubled = ref(0);

    watchEffect(() => {
    
    
      console.log(`count is: ${
      
      count.value}`);  // 自动追踪 count
      doubled.value = count.value * 2;  // 自动追踪 doubled
    });

    return {
    
    
      count,
      doubled
    };
  }
}

Neste exemplo, watchEffectele é executado uma vez imediatamente e executado novamente sempre que counthouver doubledalterações.

pare de observar

watchEffectRetorna uma função para parar de observar. Você pode chamar esta função para parar de observar:

const stopWatch = watchEffect(() => {
    
    
  // 你的代码
});

// 停止观察
stopWatch();

watchComparação com

• watchEffectMais automático e conveniente porque rastreia automaticamente todas as dependências reativas.
• watchMais flexível, pois permite observar uma única referência reativa ou propriedade computada e fornecer os valores antigos e novos.

Qual você escolhe depende de suas necessidades específicas. Se precisar de mais controle e flexibilidade, você pode escolher watch. Se você deseja uma solução mais simples e automática, esta watchEffectpode ser melhor para você.