[vue3新特性] 3.组合api——4.生命周期

我们在之前学习过了vue对象的生命周期分为四个阶段，一共八个，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted,
在使用组合API时，生命周期也是这么几个，但是写法不一样，我们来拿mounted这个生命周期学习一下，因为它最常用了
要是这个生命周期时，首先要导入它

import { onMounted } from 'vue'

我们看到名字有点不一样，在原来的mounted之前加了一个on，其他的生命周期函数也都是同样的方式
onMounted是一个方法，它接受一个回调函数，在页面挂载时，就会调用这个回调函数，
现在我们就可以在setup中使用它了

<script>
import { onMounted } from 'vue'
export default {
  name: 'App',
  setup() {
    onMounted(() => {
      console.log('组件挂载完成')
    })
  },
}
</script>

给onMounted函数传递了一个箭头函数，这个箭头函数打印了一段话，我们打开浏览器，发现控制台里打印了

组件挂载完成

说明我们的回调函数被调用了。

下面我们做一个小例子，模拟在页面挂载后，加载一个数组，显示在页面上
1）要有一个响应式的对象，来存放我们的数组

    const data = reactive({
      list: [],
    })

2）来写一个模拟获取数据的方法，getList

const getList = () => {
      setTimeout(() => {
        data.list = ['苏格拉底', '柏拉图', '亚里士多德']
      }, 1000)
}

3）最后在mounted回调中调用它

    onMounted(() => {
      console.log('组件挂载完成')
      getList()
    })

完整的代码

<template>
  <ul>
    <li v-for="item in data.list" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
import { reactive, onMounted } from 'vue'
export default {
  name: 'App',
  setup() {
    const data = reactive({
      list: [],
    })

    const getList = () => {
      setTimeout(() => {
        data.list = ['苏格拉底', '柏拉图', '亚里士多德']
      }, 1000)
    }
    onMounted(() => {
      console.log('组件挂载完成')
      getList()
    })

    return {
      data,
    }
  },
}
</script>

总结一下：
1）跟之前学习的生命周期一样，只不过前面添加了on
2）在使用时要先导入
3）可以写多个mounted回调，跟以前不一样，比如

    onMounted(() => {
      console.log('组件挂载完成')
      getList()
    })
    onMounted(() => {
      console.log('第二次调用mounted')
    })

两个都会调用，更加方便了我们把业务逻辑代码分块来写

这节课就到这里，还是建议小伙伴们自己动手写一写，才能真正学会。