Vue3中使用生命周期函数

https://zhuanlan.zhihu.com/p/136417498

https://juejin.cn/post/6874927606820274184

什么是Composition API

如果你还不知道，Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。

简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。

添加我们的生命周期钩子

与Vue3中的大多数功能一样，生命周期钩子是我们必须导入到项目中的东西，这是为了帮助使项目尽可能轻巧。

import { onMounted, onUpdated, onUnmounted } from 'vue'

除去 beforeCreate 和 created 之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup 方法中访问

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onActivated
onDeactivated
onErrorCaptured

我们导入它们并在我们的代码中访问它们

<template><div id="app"><p>{{title}}</p><p>{{msg}}</p><router-view/></div>
</template>
import { ref,toRefs,reactive,onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {setup() {onBeforeMount(() => {// ... 例如返回首页 隐藏按钮})onMounted(() => {// ... 直接调用方法getHomeAllData().then(res=>{recommends.value = res.goods.data;banners.value = res.slides;})  })onBeforeUpdate(() => {// ... })onUpdated(() => {// ... })onBeforeUnmount(() => {// ...  例如进入列表页 显示按钮})onUnmounted(() => {// ... })onActivated(() => {// ... })onDeactivated(() => {// ... })onErrorCaptured(() => {// ... })}
}

从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

Vue2模板

<template><div><Header></Header><div class="article_list"><ul><li></li></ul></div><Footer></Footer></div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {components: { Header, Footer },data () {return {list: []}},created () {this.getData()},methods: {getData () {this.$api.get('topics', null, r => {console.log(r)})}}
}
</script>
<style>.article_list {margin: auto;}
</style>

<template><div><p>{{id}}--{{name}}--{{num}}</p><button @click="change1">点击</button></div>
</template>
<script>
import { reactive ,toRefs,computed,onMounted,onUnmounted} from 'vue'
export default {name: "component_name",setup() {// reactive 数据双向绑定const data = reactive({id:1,name:'',num:computed(()=>state.id+=5) //计算属性})// 方法const methods = {change1(){},change2(){}}const test = ()=>{console.log('方法测试')}//页面加载完成onMounted(() => {})//销毁onUnmounted(() => {})return {// toRefs转换为响应式数据...toRefs(data),...methods,test}}
}
</script>
<style lang="scss" scoped>
</style>

常用Composition API https://blog.csdn.net/THcoding_Cat/article/details/114155707
1.setup
组合API的入口，只在初始化时执行一次；函数中若返回对象，对象中的属性或方法，可在模板中直接使用

export default {setup(){// 非响应式数据(响应式数据：数据变化，页面跟着渲染变化)let count = 0;// 方法let updateCount = () => {console.log('updateCount');count++;}// 返回一个对象return{//属性count,updateCount}}
}

2.setup细节问题
2.1.setup执行时机
在beforeCreate执行一次，此时组件并未创建
因组件并未创建，则this为undefined；不能用this来访问data/methods/props；所以setup函数中不能使用this
其余所有compositionAPI相关回调函数中也不可以使用this
示例：

export default {beforeCreate(){console.log('beforeCreate',this);},created(){console.log('created',this); },setup(){console.log('setup',this);return{}}
}

执行结果：

可以看到setup中没有this；且vue3.x中的this做了处理，是一个proxy对象

tips:网上还有setup执行时机是在beforeCreate和created之间这种说法？

从上图打印效果最直观的讲，setup的执行在beforeCreate和created之前

其次，beforeCreate和created内部是有this存在的，而setup中this为undefined,这也验证了setup的执行在beforeCreate和created之前

在Vue3.x中生命周期函数发生了语义化的变化，比如beforeDestroy变更为了beforeUnmount;其他生命周期均小有变化，且其他生命周期均在setup中执行；

而beforeCreate和created还维持原本，这说明Vue3.x中本身并没考虑为beforeCreate和created留有位子，而是使用setup来代替这两者，之所以Vue3.x中还有这两个钩子函数，主要是为了向下兼容

2.2.setup的返回值
一般都返回一个对象
返回对象中的属性会与data函数返回对象合并成为组件对象的属性
返回对象中的方法会与methods中的方法合成为组件对象的方法
如有重名，setup优先
不推荐混用，methods中可以访问setup提供的属性余方法；而setup中却不能访问data/methods
setup不推荐是一个async函数：因为返回只不再是return的对象，而是promise,模板看不到return对象中的属性数据
tips:setup可不可以是一个async函数？

可以是一个async函数，但是由于是异步，使得数据不会立即给到模板，可以使Suspense标签解决该问题，代码示例如下：

在异步组件中的setup中使用async，在未得到数据前会有一个加载中的过渡效果

<template><h1>Suspense的使用</h1><Suspense><template #default><!--异步组件--><HelloWorld /></template><template v-slot:fallback><h2>加载中...</h2>  </template></Suspense>
</template>

参考：https://zhuanlan.zhihu.com/p/137364605

2.3.setup中的参数
setup(props,context) / setup(props,{attrs,slots,emit})
props：包含props配置中声明的属性的对象，可用于父传子传值
attrs：包含没有在props配置中声明的属性的对象，相当于this.$attrs
slots：包含所有传入的插槽内容的对象，相当于this.$slots
emit：用来分发自定义事件的函数，相当于this.$emit，可用于子传父传值
tips:setup中接收的props是响应式，当传入新的props时，会及时更新，由于是响应式的，所以不可以使用ES6解构，解构会消除响应式

同理，setup中声明的响应式对象也不可解构，而是返回的时候使用toRefs来进行转换
示例：

export default {name: 'HelloWorld',props: {msg: String},setup(props,context){console.log('props:',props);console.log('props.msg:',props.msg);console.log('context:',context);return {}}
}

执行结果：

新的调试钩子函数

们还可以在Vue3中使用两个全新的钩子函数来进行调试。他们是：

onRenderTracked
onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {onRenderTriggered(e) {debugger// 检查哪个依赖项导致组件重新呈现}
}

就是这样！