petitevue中 setup方法里面 怎么写mounted方法

在`PetiteVue`中，`mounted`钩子函数可以使用`onMounted`函数来实现。你可以在`setup`函数中使用`onMounted`函数来定义`mounted`钩子函数的逻辑。例如：

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

<script>
import { onMounted, reactive } from 'petite-vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, world!'
    })

    onMounted(() => {
      console.log('mounted')
    })

    return state
  },
}
</script>

在上面的例子中，我们使用`reactive`函数创建了一个响应式对象`state`，其中包含了一个`message`属性。然后，我们使用`onMounted`函数定义了`mounted`钩子函数的逻辑，即在控制台输出`mounted`。最后，我们将`state`对象作为组件的返回值。在模板中，我们展示了`message`的值。当组件挂载完成后，你将在控制台中看到`mounted`输出。

需要注意的是，在`setup`函数中，我们不能直接使用`this`访问组件的实例，因为`setup`函数是在组件实例化之前执行的。如果你需要访问组件实例的属性或方法，你可以使用`getCurrentInstance`函数来获取当前组件实例的引用，并从中获取所需的属性或方法。例如：

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

<script>
import { onMounted, reactive, getCurrentInstance } from 'petite-vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, world!'
    })

    onMounted(() => {
      const vm = getCurrentInstance().proxy
      vm.sayHello()
    })

    const sayHello = () => {
      console.log('Hello!')
    }

    return {
      ...state,
      sayHello,
    }
  },
}
</script>

在上面的例子中，我们定义了一个`sayHello`方法，并将其添加到组件的返回值中。在`onMounted`钩子函数中，我们使用`getCurrentInstance`函数获取当前组件实例的引用，并从中获取`proxy`属性，即组件实例对象。然后，我们使用`proxy`属性调用`sayHello`方法。