vue3 的setup和生命周期

许多文章认为setup执行时间在beforeCreate 和created 之间，但是通过实际测试发现setup调用在beforecreate之前。

export default {beforeCreate() {console.log('beforeCreate running....');},created() {console.log("created running");},mounted() {console.log("mounted running");},setup() {let info = ref(0);const ins = getCurrentInstance();console.log('setup running....');return{}}}

执行结果：

setup确确实实是最先执行了。
在vue3中setup代替了beforeCreate和created，函数里面无法使用data和methods方法中的数据。setup是集成性api，setup中定义的变量和方法，如在template模板中使用，变量需要使用ref或者reactive关键字定义，并且将使用到的方法和变量return出去，不然页面没有效果还报错的。

ref 用于定义基本数据加粗样式类型，比如string、number、boolean等。ref的本质其实还是reactive，当我们给ref函数传递一个值之后，ref函数会自动的转化成{value: xx}，只是中间自动帮我们套了一层value。const name = ref(1) => name: {value: 1}
reactive用于定义复杂数据类型，比如数组、对象等。

在setup 中，有9个旧的生命周期钩子可以访问：

beforeCreate -> use setup()
created -> use setup()
其中setup函数是整合 created跟 beforeCreat
beforeMount ->onBeforeMount （挂载前）
mounted -> onMounted （挂载后）
beforeUpdate -> onBeforeUpdate**（更新前）**
updated -> onUpdated （更新后）
beforeDestroy -> onBeforeUnmount ( 销毁前）
destroyed ->onUnmounted ( 销毁后）

通过解构赋值的方式即可引入：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'export default {setup() {onBeforeMount(() => {// ... })onMounted(() => {// ... })onBeforeUpdate(() => {// ... })onUpdated(() => {// ... })onBeforeUnmount(() => {// ... })onUnmounted(() => {// ... })onActivated(() => {// ... })onDeactivated(() => {// ... })onErrorCaptured(() => {// ... })}}

setup 函数将接收两个参数，props&context

注意：setup函数里面是没有this对象的，使用它的话会报 undefined。

setup 函数将接收两个参数，props&context
第一个参数props，主要是用来获取属性传值，在使用之前必须现在Vue的props属性中先声明，才能在setup函数的第一个参数中获取到。

<template><ButtonClick :name="'MyButton'" />123</template>

import { getCurrentInstance, ref } from 'vue'export default {props: {name: String},setup(props,ctx) {let info = ref(0);const ins = getCurrentInstance();console.log("props.name",props.name)return {info, handleClick, secondClick, thirdClick}}}

– 第二个参数：context
和props一样的用法, 但是不写也可以用，context参数是一个普通的javascript对象，它对组件暴露三个属性：attrs、slots、emit。
attrs和slots是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以attrs.x或slots.x的方式引用property。attrs和slots是非响应式的。应该在onUpdated生命周期钩子中执行此操作。

attrs：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到了 setup中的context的attrs属性。
slots：用于接收渲染父组件传递的插槽内容。
emit：向父组件触发事件。

vue3 的setup和生命周期