你不知道的<script setup>不完全攻略(二)

前言

最近好像大家都非常非常的忙，但是我们小组好像有点忙(kong)碌(xian)，就想着尤大都发布了这么久的vue3了，要不重构一下最近的项目，在一番讨(si)论(bi)后，备好了陈醋开始吃螃蟹。

1.setup中的生命周期

因为我将setup写在了script标签中，自然就要考虑生命周期的问题，在研究了官方文档后，整理（拷贝）如下：

选项式 API	Hook inside (setup)
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

我们在日常开发中用到的较多的基本就是mounted左右的了，所以由上表可以看出来我们在setup中使用onMounted就可以啦，举个栗子：

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


</script>

啊啊啊，没有this怎么办？

因为在项目中使用了element plus组件库，所以熟练的打开文档开始copy,突然看到了几天未见的this.$xxx,这个妹妹好似在哪见过？

虽然已经很确定setup中没有this我的好伙伴，但是抱着试试看，错了又不用负责人的态度大胆的cv到了项目上，果不其然，鲜红的报错刺激着我的大脑，短暂的思考（发呆）后，开始goole，进入github看众人的讨论，突然一个评论映入眼帘，那就是this的好朋友proxy，听说就是你可以替代this?说试就试，我们先要从getCurrentInstance()中得到proxy，那我们首先要将getCurrentInstance从vue中导出，具体代码如下：

<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>

经过测试发现可以正常运行，那这个this问题就暂时告一段落啦。

路由获取参数和路由跳转真的那么简单吗？

在vue2.x的语法中，我们想要获取路由上的参数那就要使用this.$route.query.xxx,我们在上面也说到了proxy是this的好兄弟，大部分this也可以用proxy来替代，自然我们在setup中可以写成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();这个就交给大家自己尝试啦，毕竟授人以鱼不如授人以渔是吧嘿嘿。

尾言

以上内容都是小菜辛辛苦苦敲出来的，欢迎各位看官老爷指点出其中不足的地方，有什么疑问也可以评论哦，我看到会第一时间回复您。转载请标注出处。
--wy白菜