前言
最近好像大家都非常非常的忙,但是我们小组好像有点忙(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白菜