vue3的生命周期和编程式导航

vue3的生命周期：

vue3的生命周期基本和vue2一样，只是最后一个钩子函数名字改变了。用法上可以和vue2一样作为配置项去使用完全可以，也可以使用组合式api在setup函数里面使用。

值得注意的是，vue3中并没有叫beforeCreate和created这两个名字的钩子，取而代之起作用的是setup函数，也就是说，之前写在这两个钩子函数里面的东西，现在统统写在setup里面。

例如发请求，进入页面就调用：

<template>

</template>

<script>
export default {
  setup() {
    // 这是一个请求数据的方法
    function request(){
        console.log("这是一个axios请求");
    }

    request()  //直接调用就行  和原生js写法一致

    return {
        request
    };
  },

};
</script>

这样写在setup里面的方法，默认就会在相当于created这个时期执行。 除此之外，其他的钩子函数和vue2是一样的。

vue3的编程式导航：

在vue3里面，因为一切的东西都在setup函数里面，然而setup函数没有this，那么之前的那种 this.$router.push() 写法就不对了。

这个方法还存在，只不过没有了this，就得换种方法去写，具体写法是：

<template>
    <button @click="nav">首页</button>
</template>

<script>
// 先得引入这两个路由函数
import {useRoute,useRouter} from 'vue-router'
export default {

  setup() {

    // 接收函数返回的东西
    const $router = useRouter()  // 跳转
    const $route = useRoute()  // 拿到路由信息（这里没用到）

     // 跳转到首页
     function nav(){
       $router.push('/')
     }

    return {
        nav
    };
  },

};
</script>