不完整的你不知道的指南(2)

前言最近大家好像都非常非常的忙，但是我们团队好像有点忙(kong)忙(xian)，想着游达发布vue3这么久了，要不我们重新设计一下最近的项目和大家一起讨论（si）和（bi）之后，我做了醋，开始吃螃蟹。

1。设置的生命周期

既然我在 script 标签中编写了设置，那么我们自然也涵盖了生命周期问题。仔细阅读了官方文件后，我整理（抄）如下：

可选API	钩入（设置）
创作前	不需要*
创建者	不需要*
组装前	安装前
已安装	已安装
更新前	更新前
更新了	更新
断开连接之前	在卸载之前
未组装	已卸载
捕获错误	OnError 捕获者
渲染跟踪	isRenderTracked
渲染开始	已触发渲染

我们日常开发中用的最多的基本都是mounted，所以从上表我们可以看到，我们可以很方便的使用onMounted进行设置。例如：

<script setup>
import { reactive, onMounted } from "vue";
const data = reactive({
    mas:"我爱祖国"
});
const init = () => {
    console.log(data.msg)
};
onMounted(() => {
    init()
});


</script>

啊啊，没有它我该怎么办？

由于我在项目中使用了element plus组件库，所以我熟练地打开文档并开始复制。突然我看到了几天没见过的这个.$xxx。我在哪里见过这个护士？

虽然我确定设定里没有，我的好伙伴，但我会尝试一下。如果我错了，我就带着项目走，没有负责人的态度。正如所料，鲜红色的错误信息刺激了我的大脑。经过思考（虽然昏昏沉沉），我启动了 Goole，并前往 github 查看人们的讨论。突然出现一条评论，这是好朋友的代理。听说可以换？去尝试一下。首先我们需要获取getCurrentInstance( )，然后我们需要先从vue导出getCurrentInstance，具体代码如下：

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
    msg: "hello,vue3"
});
const init = () => {
    proxy.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            proxy.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
};
onMounted(() => {
    init()
});
</script>

经过测试，发现可以正常工作，所以这个问题就暂时结束了。

获取参数和路由跳数真的那么容易吗？

在Vue2.x语法中，如果我们想要获取路由参数，需要使用this.$route.query.xxx。上面我们也提到了代理服务器是它的好兄弟，大部分都可以使用。使用代理代替，当然我们可以在配置中写 proxy.$route.query.xxx，例如：

import { reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
    msg: "hello,vue3"
});
const init = () => {
if(proxy.$route.query.code){
    proxy.$alert('这是一段内容', '标题名称', {
              confirmButtonText: '确定',
              callback: action => {
                proxy.$message({
                  type: 'info',
                  message: `action: ${ action }`
                });
              }
            });
    }
};
onMounted(() => {
    init()
});

有没有想过这和 vue2.x 有什么区别？既然游达说vue3是一个比较大的改变，那么它必须提供一个解决方案。经过一番研究，终于找到了一个没什么好说的大孩子{useRoute, useRouter}，开始修改上面的代码：

import { reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const data = reactive({
    msg: "hello,vue3"
});
const init = () => {
// if(proxy.$route.query.code){
//    proxy.$alert('这是一段内容', '标题名称', {
//              confirmButtonText: '确定',
//              callback: action => {
//                proxy.$message({
//                  type: 'info',
//                  message: `action: ${ action }`
//                });
//              }
//            });
//    }
// };
const route = useRoute();
if(route.query.code){
    proxy.$alert('这是一段内容', '标题名称', {
              confirmButtonText: '确定',
              callback: action => {
                proxy.$message({
                  type: 'info',
                  message: `action: ${ action }`
                });
              }
            });
    }
};
onMounted(() => {
    init()
});

同样，如果我们要路由跳转，可以const router = useRouter()；就看大家去尝试了，授之以鱼不如授之以渔吧？