如何在功能组件中的状态发生变化时触发钩子？

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 在count发生变化时执行的逻辑
    console.log('Count changed');
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

Vue.component('my-component', {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newVal, oldVal) {
      // 在count发生变化时执行的逻辑
      console.log('Count changed');
    }
  },
  template: `
    <div>
      <button @click="count++">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `
});

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `
})
export class MyComponent implements OnChanges {
  @Input() count: number;

  ngOnChanges(changes) {
    if (changes.count) {
      // 在count发生变化时执行的逻辑
      console.log('Count changed');
    }
  }

  increment() {
    this.count++;
  }
}