关于vue3:vue3部分知识梳理

1、script-setup 模式中父组件获取子组件的数据

咱们能够应用全局编译器宏的defineExpose宏，将子组件中须要裸露给父组件获取的参数，通过 {key: vlaue}形式作为参数即可，父组件通过模版 ref 形式获取子组件实例，就能获取到对应值：

// 子组件
<script setup>
    let name = ref("pingan8787")
    defineExpose({ name }); // 显式裸露的数据，父组件才能够获取
</script>

// 父组件
<Chlid ref="child"></Chlid>
<script setup>
    let child = ref(null)
    child.value.name //获取子组件中 name 的值为 pingan8787
</script>

留神：

全局编译器宏只能在 script-setup 模式下应用；
script-setup 模式下，应用宏时无需 import能够间接应用；
script-setup 模式一共提供了 4 个宏，包含：defineProps、defineEmits、defineExpose、withDefaults。

2、配置全局自定义参数

在 Vue2.x 中咱们能够通过 Vue.prototype 增加全局属性 property。然而在 Vue3.x 中须要将 Vue.prototype 替换为 config.globalProperties 配置：

// Vue2.x
Vue.prototype.$api = axios;
Vue.prototype.$eventBus = eventBus;

// Vue3.x
const app = createApp({})
app.config.globalProperties.$api = axios;
app.config.globalProperties.$eventBus = eventBus;

应用时须要先通过 vue 提供的 getCurrentInstance办法获取实例对象：

// A.vue

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from "vue";

onMounted(() => {
  const instance = <any>getCurrentInstance();
  const { $api, $eventBus } = instance.appContext.config.globalProperties;
  // do something
})
</script>

3、v-model 变动

Vue2.x

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

Vue3.x

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

4、开发环境报错不好排查

Vue3.x 对于一些开发过程中的异样，做了更敌对的提醒正告，比方上面这个提醒：

这样可能更分明的告知异样的出处，能够看出大略是 <ElInput 0=……这边的问题，但还不够分明。这时候就能够增加 Vue3.x 提供的全局异样处理器，更清晰的输入谬误内容和调用栈信息，代码如下：

// main.ts
app.config.errorHandler = (err, vm, info) => {
    console.log('[全局异样]', err, vm, info)
}

这时候就能看到输入内容如下：

5、察看 ref 的数据不直观，不不便

当咱们在控制台输入 ref申明的变量时。

const count = ref<numer>(0);

console.log('[测试 ref]', count)

会看到控制台输入了一个 RefImpl对象：

看起来很不直观。咱们都晓得，要获取和批改 ref申明的变量的值，须要通过 .value来获取，所以你也能够：

console.log('[测试 ref]', count.value);

这里还有另一种形式，就是在控制台的设置面板中开启 「Enable custom formatters」选项。

这时候你会发现，控制台输入的 ref的格局发生变化了：

6、Vite

（1）Vite 配置 alias 类型别名

当我的项目比较复杂的时候，常常须要配置 alias 门路别名来简化一些代码：

import Home from '@/views/Home.vue'

在 Vite 中配置也很简略，只须要在 vite.config.ts 的 resolve.alias中配置即可：

// vite.config.ts
export default defineConfig({
  base: './',
  resolve: {
    alias: {
      "@": path.join(__dirname, "./src")
    },
  }
  // 省略其余配置
})

如果应用的是 TypeScript 时，编辑器会提醒门路不存在的正告⚠️，这时候能够在 tsconfig.json中增加 compilerOptions.paths的配置：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
     }
  }
}

（2）Vite 配置全局 scss

当咱们须要应用 scss 配置的主题变量（如 $primary）、mixin办法（如 @mixin lines）等时，如：

<script setup lang="ts">
</script>
<template>
  <div class="container"></div>
</template>

<style scoped lang="scss">
  .container{
    color: $primary;
    @include lines;
  }
</style>

咱们能够将 scss 主题配置文件，配置在 vite.config.ts 的 css.preprocessorOptions.scss.additionalData中：

// vite.config.ts
export default defineConfig({
  base: './',
  css: {
    preprocessorOptions: {
      // 增加公共款式
      scss: {
        additionalData: '@import "./src/style/style.scss";'
      }

    }
  },
  plugins: [vue()]
  // 省略其余配置
})

如果不想应用 scss 配置文件，也能够间接写成 scss 代码：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '$primary: #993300'
      }
    }
  }
})

7、VueRouter

（1）script-setup 模式下获取路由参数

因为在 script-setup模式下，没有 this能够应用，就不能间接通过 this.$router或 this.$route来获取路由参数和跳转路由。当咱们须要获取路由参数时，就能够应用 vue-router提供的 useRoute办法来获取，应用如下：

// A.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import router from "@/router";

import { useRoute } from 'vue-router'

let detailId = ref<string>('');

onMounted(() => {
    const route = useRoute();
    detailId.value = route.params.id as string; // 获取参数
})
</script>

如果要做路由跳转，就能够应用 useRouter办法的返回值去跳转：

const router = useRouter();
router.push({
  name: 'search',
  query: {/**/},
})

8、Element Plus

（1）element-plus 打包时 @charset 正告

我的项目新装置的 element-plus 在开发阶段都是失常，没有提醒任何正告，然而在打包过程中，控制台输入上面正告内容：

尝试在 vite.config.ts中配置 charset: false，后果也是有效：

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        charset: false // 有效
      }
    }
  }
})

最初在官网的 issues 中找到解决办法：

// vite.config.ts

css: {
  postcss: {
    plugins: [
      // 移除打包element时的@charset正告
      {
        postcssPlugin: 'internal:charset-removal',
        AtRule: {
          charset: (atRule) => {
            if (atRule.name === 'charset') {
              atRule.remove();
            }
          }
        }
      }
    ],
  },
}