Vue Hooks & 高级操作

1. 自定义 Hook

1
2
3
4
5
6
7
8
import { ref, onMounted } from 'vue';

export function useCounter() {
    const count = ref(0);
    const increment = () => count.value++;
    onMounted(() => console.log('hook mounted'));
    return { count, increment };
}

2. watch 与 watchEffect

  • watch：监听特定数据变化
1
watch(() => state.value, (newVal, oldVal) => { ... })
  • watchEffect：自动追踪依赖数据
1
2
3
watchEffect(() => {
    console.log(state.value + ' changed');
});

3. provide / inject

  • 父组件 provide
1
provide('key', value)
  • 子组件 inject
1
const val = inject('key')