4. vue3 项目实践

1. vue2 中的 data

// vue3
import { reactive, toRefs } from 'vue';

setup() {
   const comData = reactive({
      clickProvinceId: null, // 当前省份的id
      hoverCityName: "", // hover 城市名字
      openIndexDetailWindow: false, // 是否打开指标解释面板
      indexDetailWindowTitle: '', // 指标解释面板的标题
      indexDetailWindowContent: '' // 指标解释面板的内容
 });
  return {
     ...toRefs(comData)
  }
}

2. vue2 methods

// vue3
setup() {
   const currentClickInfo = (val) => {
       // xxx
    }
   return {
      currentClickInfo
   }
}

3. vue2 中的 router

// vue3
import { useRoute，useRouter } from "vue-router";
setup() {
   const route = useRoute();
   const router = useRouter();
    // 城市下拉改变城市进入城市页面
   const citySelectChange = () => {
     router.push({ path: "/home/city-home" });
  }
  // 初始化导航栏
  const initCurrentTab = () =>{
     let routePath = route.fullPath.split("/");
     let len = routePath.length;
     let last = routePath[len - 1];
  }
}

4. vue2 中的 store

import { useStore } from 'vuex';
setup() {
  const store = useStore();
  // 首先需要将 store 中的数据转化为 ref 数据，然后在进行数据的监听
  // watch
  const isMapLoaded = computed(()=> store.state.global.isMapLoaded);
  watch(isMapLoaded, (val)=> {
      if(val) {
        addLayers();
      }
  })
  store.commit('updateCurCityCode', item[0].value);
   return {
      ...toRefs(isMapLoaded)
   }
}

5. vue2 中的 watch （可以设置多个，但是监听的对象必须是响应式的对象）

// vue3
import { watch } from 'vue';
// 监听 data 中的对象
watch(()=>comData.clickProvinceId，()=> {
   dealSelectedAreaToParams(store.state.global.drawArea.value);
   requestRightData();
 },{
    immediate: true
})
// 监听 store 中的对象
const curCity= computed(()=> store.state.global.curCity);
watch(curCity,()=> {
   // xxx
 },{
    immediate: true，
    deep： true
})

6. vue2 中的 props

// vue3
  props: {
    event: {
      type: Boolean,
      default: false,
    }
  }
setup(props) {
 // 调用
 props.event
}

7. vue2 中的 emit

// vue3
emits: ['xxx']
setup(props， context) {
 // 调用
  context.emit('xxx')；
}

8. vue2 中的 sync

// vue3
// 父组件
<SelectPop v-model:openPop="openPop"></SelectPop>
// 子组件
setup(props, context) {
 const dialogVisible = computed({
   get() {
     return props.openPop;
   },
   set(nv) {
     context.emit("update:openPop", nv);
   }
 })
}

9. vue2 中的 this

// vue3 中尽量不要使用 this 这种方式
import { getCurrentInstance } from 'vue';
setup() {
   const { ctx } = getCurrentInstance();
}

10. vue2 中的生命周期

// vue3
import {  onBeforeUnmount， onMounted } from 'vue';
setup() {
    onMounted(()=> {
       clearCurCityData();
       clearDrawLayer();
      });
    })

    onBeforeUnmount(()=> {
      comData.clickProvinceId = null;
      CountryHomeLayerControl.removeCountryProvinceAndCityLayer();
    })
}

11. vue2 template

// vue3 在vue3中不在要求模版的跟节点必须是只能有一个节点。
<template>
   <CountryLeft @toggleLegendTitle="toggleLegendTitle" @currentClickInfo = "currentClickInfo"/>
   <CountryBottom class="home-bottom-box" @currentClickInfo = "currentClickInfo"/>
<template>

12. vue2 slot

// vue3
<el-dropdown class="user-wrap" @command="handleCommand" :hide-on-click="false">
    <span class="el-dropdown-link">
    <template #dropdown>
      <el-dropdown-menu>
         <el-dropdown-item command="exit">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
</el-dropdown>

13. vue2 弹窗等组件

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多

原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值

这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>

import { ref } from 'vue';
export default {
  setup() {
    // toast 的封装
    const visible = ref(false);
    let timer;
    const showToast = () => {
      visible.value = true;
      clearTimeout(timer);
      timer = setTimeout(() => {
        visible.value = false;
      }, 2000);
    }
    return {
      visible,
      showToast
    }
  }
}

image.png

14. transition
    <router-view v-slot="{ Component }">
    <transition :name="transitionName">
    <keep-alive>
    <component :is="Component"/>
    </keep-alive>
    </transition>
    </router-view>