生命周期函数的新写法

学过选项式API的同学，应该都比较熟悉生命周期函数，我们可以利用生命周期函数的执行规律来帮我完成一些业务逻辑的处理。

在组合式API里面生命周期函数的写法和选项API里面还是有所区别的， 那么我们这节课来看一下在组合式API里面怎么来编写生命周期函数。

在组合式API中生命周期函数它以一个hook函数来使用的，需要先从vue依赖里面引入对应的函数，然后在setup内部来调用，演示如下：

<script>
import HelloWorld from './components/HelloWorld.vue';
import { onMounted } from 'vue';
export default {
  components: { HelloWorld },
  setup() {
    onMounted(() => {
      console.log('onMounted');
    });
  },
};
</script>

对比下我们之前在选项式api里面的写法，还是有一些区别的。

export default {
  components: { HelloWorld },
  mounted() {
    console.log('onMounted');
  },
};

我们再来给大家演示其他生命函数

onBeforeMount 和 onMounted

当组件的被渲染时会调用这个两个函数

onBeforeMount(() => {
   console.log('onBeforeMounted');
});

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

onBeforeUpdate 和 onUpdated

这两个函数需要组件触发重新渲染才会被调用

onBeforeUpdate(() => {
   console.log('onBeforeUpdate');
});
onUpdated(() => {
  console.log('onUpdated');
});

onBeforeUnmount 和 unmounted

这两个函数需要组件被销毁时才会被调用，我们可以使用v-if来模拟组件渲染和销毁

onUnmounted(() => {
  console.log('onUmounted');
});
onBeforeUnmount(() => {
   console.log('onUmounted');
});

beforeCreate 和 created

最后，我们来看一下beforeCreate 和 created ，这个两个生命周期函数表示组件实例创建之前和创建之后。但是在组合式api里面这个两个函数是不能用的，我们可以用setup来代替这两个生命周期函数。将我们需要在beforeCreate和created里面写逻辑代码直接写到setup函数里面，按生命周期执行顺序来说setup在这个两个函数之前执行。

setup() {
  console.log('onMounted');
},