preface

It seems that everyone is very busy recently, but our group seems to be busy so much. I just thought that Yudu released vuE3 for so long. Maybe we should reconstruct the latest project, and after some discussion on SI and BI, we will start to eat the old vinegar.

1. Lifecycle in Setup

Since I wrote setup in the script tag, it was natural to consider the life cycle. After studying the official documentation, I reorganized (copied) the following:

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

/ / Use onMounted in setup. / / use onMounted in setup.

<script setup>
import { reactive, onMounted } from "vue";
const data = reactive({
    mas:"I love my country"
});
const init = () = > {
    console.log(data.msg)
};
onMounted(() = > {
    init()
});


</script>
Copy the code

Uh-huh, what if there’s no this?

Because I used element Plus component library in my project, I opened the document skillfully and started to copy it. Suddenly I saw this.$XXX.

Although already very sure no this setup my good partner, but holding the try, wrong attitude, head without bold CV on the project, sure enough, bright red error to stimulate my brain, after a short thinking (stunned), began to Google, look into making the discussion, it suddenly occurred to one of the comments greeted, That is the good friend proxy of this. I heard that you can replace this? GetCurrentInstance () = getCurrentInstance(); getCurrentInstance = vue;

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
    msg: "hello,vue3"
});
const init = () = > {
    proxy.$alert('This is a piece of content.'.'Title name', {
          confirmButtonText: 'sure'.callback: action= > {
            proxy.$message({
              type: 'info'.message: `action: ${ action }`}); }}); }; onMounted(() = > {
    init()
});
</script>
Copy the code

After the test found that it can work normally, then this problem is temporarily closed.

Is it really that easy to get parameters and redirect routes?

$this.$route.query. XXX is the syntax for this.$route.query. XXX. $route.query. XXX, for example:

import { reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
    msg: "hello,vue3"
});
const init = () = > {
if(proxy.$route.query.code){
    proxy.$alert('This is a piece of content.'.'Title name', {
              confirmButtonText: 'sure'.callback: action= > {
                proxy.$message({
                  type: 'info'.message: `action: ${ action }`}); }}); }}; onMounted(() = > {
    init()
});

Copy the code

{useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {useRoute, useRouter} {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(' this is a paragraph of content ', 'title name ', {
// confirmButtonText: 'confirm ',
// callback: action => {
// proxy.$message({
// type: 'info',
// message: `action: ${ action }`
/ /});
/ /}
/ /});
/ /}
// };
const route = useRoute();
if(route.query.code){
    proxy.$alert('This is a piece of content.'.'Title name', {
              confirmButtonText: 'sure'.callback: action= > {
                proxy.$message({
                  type: 'info'.message: `action: ${ action }`}); }}); }}; onMounted(() = > {
    init()
});

Copy the code

Const router = useRouter(); After all, it is better to teach a man to fish than to teach a man to fish.

Stern said

The above content is xiaocai worked hard to knock out, welcome to see the officials to point out the shortcomings of the place, there is any doubt can also comment oh, I see will be the first time to reply to you. Please mark the source of reprint. – wy cabbage