vue2到vue3常用写法的变化

vue3相比vue2多了setup方法，在setup方法中this是undefined，取值很不方便，因此需要修改之前的写法，常用的有以下几点

1. setup中使用prop中的值
   

 props: ["tabsItem","activeTab","activeNav"],
        setup(props){
            props.tabsItem=""
        },

如图即可操作prop中的值
2. setup中使用this.$router.push

  //引入路由函数
    import { useRouter } from "vue-router";
    export default {
        //使用
        setup() {
            //初始化路由
            const router = useRouter();
            router.push({
                path: "/"
            });
            return {};
        },

3. setup中使用$emit
   

 setup(props,context){
            const router = useRouter();
            //tab点击移除
            function removeTab(targetName) {

                context.emit('giveTabItem',  props.tabsItem)
            }

            return{
                removeTab
            }
        }

4. reactive 操作数组
   

 setup() {
            const list = reactive({
                arr: [
                    {
                        id: 1,
                        name: 1
                    },
                    {
                        id: 2,
                        name: 2
                    },
                    {
                        id: 3,
                        name: 3
                    },
                ]
            });

            function removeTest() {
                list.arr = [ {
                    id: 1,
                    name: 1
                },
                    {
                        id: 2,
                        name: 2
                    },]
            }

            return {list, removeTest}
        }

5. img中动态引入图片

<img :src="require('../assets/'+imgUrl)">

其中imgUrl为assets下的图片路径
6. vue3中注册全局组件：

import { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"
const app = createApp(App)
app.component('PopupWindow', PopupWindow)

后续本人遇到其他觉得需要添加的操作，会继续更新