钩子函数

Composition API 中的生命周期钩子函数 => Options API 钩子前面加上 on

下面这些生命周期钩子函数，都应该在组件的 setup() 阶段被同步调用

---

Eg.

onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册

1. 通常 onMounted 的调用必须放在setup()或 <script setup> 内的词法上下文中。
2. onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。不推荐！！如下图

import { onMounted } from 'vue';

function fetchData() {
  console.log('执行 fetchData 函数');
}

function myFunction() {
  onMounted(() => {
    console.log('在 myFunction 中调用 onMounted');
  });
}

export default {
  setup() {
    myFunction();
    return {};
  }
};

虽然 onMounted() 被调用的位置不在 setup() 函数内部，但它被包裹在了同步调用链中，最终会返回到 setup() 函数

setup函数

setup代替了 Vue 2 中的 data、computed、methods 等选项，在 setup 函数中，可以初始化组件的响应式数据、计算属性、方法等

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    // 初始化响应式数据
    const count = ref(0);
    const state = reactive({
      message: 'Hello'
    });

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // 返回暴露给模板的数据和方法
    return {
      count,
      state,
      doubleCount,
      increment
    };
  }
};

生命周期钩子

在组合式 API 中，生命周期钩子被视为普通的函数，可以在 setup 函数中调用它们

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
    });

    // ...
  }
};

模板引用

当我们需要访问底层的DOM元素时，可以使用 ref attribute

<input ref="input">

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  // 因为是一个ref对象，需要通过.value访问
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

注意： 只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 input，在初次渲染时会是 null。

组件上的ref

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value 是 <Child /> 组件的实例
  // 父组件对子组件的每一个属性和方法都有完全的访问权
})
</script>

<template>
  <Child ref="child" />
</template>

English

中文