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

BB2202C4-E9E5-4437-A159-E131796C6F95.jpeg

前言

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

Vite.gif

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,这个妹妹好似在哪见过?

this.png

虽然已经很确定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问题就暂时告一段落啦。

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

proxy.gif

在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白菜

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14618.html

发表评论

登录后才能评论