vue3新增特性合集

封装公共方法到原型上

再 vue2 中全局挂载方法使用的是 Vue.prototype.xxx 的形式来挂载的，但是在 vue3 中这个方法将不能使用，取而代之的是 app.config.globalProperties

任何全局的东西，应该谨慎使用。

1. 挂载
   在 main.js 中进行挂载

import { createApp } from "vue";
import App from "./App";

const app = createApp(App);
app.config.globalProperties.$msg = "这是一个提示";
app.mount("#app");

2.使用

<script>
// 必须引入
import { getCurrentInstance } from "vue";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy.$msg());
  },
};
</script>

Teleport——任意传送门

<Teleport> 是一个内置组件，这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。

1. 场景
   像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多

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

另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值
这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

3. 使用

<Teleport to="body"> </Teleport>

<Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”。

hooks 函数

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的 js 代码进行抽离出来，放到单独的 js 文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

:::tip
建议可以使用vueUse这个库，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。也就是一个 hooks 库
:::

1. 在 src 中创建一个 hooks 文件夹，用来存放 hook 文件

2. 老演员案例：封装一个获取页面坐标的方法（创建一个名叫useMousePosition.js的文件）

// src/hooks/useMousePosition.ts
import { ref, onMounted, onUnmounted, Ref } from "vue";

interface MousePosition {
  x: Ref<number>;
  y: Ref<number>;
}
function useMousePosition(): MousePosition {
  const x = ref(0);
  const y = ref(0);

  const updateMouse = (e: MouseEvent) => {
    x.value = e.pageX;
    y.value = e.pageY;
  };

// 创建点击事件
  onMounted(() => {
    document.addEventListener("click", updateMouse);
  });

// 销毁点击事件
  onUnmounted(() => {
    document.removeEventListener("click", updateMouse);
  });

  return { x, y };
}

export default useMousePosition;

3. 使用 hooks 方法

<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'
// 引入hooks
import useMousePosition from '../../hooks/useMousePosition'
export default defineComponent({
  setup () {
    // 使用hooks功能
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
})
</script>