vue3 页面渲染前执行

在 Vue3 中，可以使用 `setup` 函数来实现页面渲染前执行的逻辑。具体来说，`setup` 函数会在组件实例化之前被调用，可以在其中执行一些初始化操作。

下面是一个简单的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, world!'
    console.log('页面渲染前执行')
    return { message }
  }
}
</script>

在这个例子中，`setup` 函数中定义了一个名为 `message` 的变量，并返回了一个对象，将 `message` 变量作为对象的属性暴露出去。

在组件的模板中，可以使用 `{{ message }}` 插值语法来引用 `message` 变量，并在页面中显示出来。当组件实例化时，Vue3 会先执行 `setup` 函数，并将返回的对象作为组件实例的属性，然后再对模板进行渲染。因此，`console.log('页面渲染前执行')` 会在页面渲染前被执行。