Vue3 使用心得

Question

Teleport

在 Vue2 中，开发弹窗组件时，如果需要将 DOM 挂载到 body 下时，需要我们手动进行处理。

mounted() {
    document.body.appendChild(this.$el)
}

在 Vue3 中，使用 setup 语法时是无法使用 this 的，而使用 ref 获取 dom 的方式也比较麻烦。不过，Vue3 提供了 Teleport 组件，方便讲组件挂在到指定的 dom 下。类似于 ReactDOM.createPortal

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

状态共享

数据通信在组件开发中十分重要，当使用数据的组件多了后，无论父子组件传值还是 provide/inject 都不太便利。一般这种情况我们会使用 状态管理库来管理状态，但是对于大部分轻量应用来说，引入状态管理就太重了。而且也没啥必要性。

由于 Vue3 Composition Api 的良好设计，我们可以讲通用逻辑进行抽离，然后进行复用。实现 React hooks 的效果。因此我们可以通过 hooks 的写法，实现状态共享。

定义 store

import { reactive } from "vue";

let userStore = reactive({
  username: "蒋 xx",
  phone: "18288888888",
  rank: "120",
  avatar: "",
});

let setUserStore = (obj) => {
  Object.keys(obj).forEach((key) => {
    userStore[key] = obj[key];
  });
};

export function useUserStore() {
  return {
    userStore,
    setUserStore,
  };
}

组件使用

import { useUserStore } from "@/hooks/useUserStore";

const { userStore, setContentType } = useContentType();

总结

通过闭包结合 Composition Api 的方式，我们很容易实现多组件中数据共享。对于大部分使用场景都能适用。如果需要更加完善的状态管理，可以使用 Pinia

动态样式

组件中定义的 state 可以直接在 <style> 中使用

.h1 {
    color: v-bind(colorState)
}

看了下实现原理，是通过 CSS 变量来实现的

响应式值

使用 reactive 可以声明响应式对象。在值更改时，可以触发对应的依赖更新。需要对 reactive 重新复制时，不能直接改变赋值

const data = reactive({a:1,b:2})
Object.assign(data,{a:2,b:1})

使用 Object.assign 进行赋值操作

内置函数

createApp

createApp 传入组件，返回 Vue 应用的实例，非组件的实例。应用实例 mount 后返回组件的实例。

createNode

就是 h 函数，用于创建 Vnode, 可用 render 函数挂载到 DOM

render

render(vnode, dom)

将 vnode 挂载到 dom 中

watch

watch 可以监听响应式值的变化

watch(refValue, handle, options)

可以同时监听多个值

watch([() => a, () => b], ([curA,curB], [prevA,prevB]) => {})

第三个参数就是 vue2 中的选项， deep , immediate 等

组件类型

使用 TS 时，我们需要通过 ref 获取组件的实例，同时我们希望获取 通过 defineExposed 暴露的属性。使用 TS 内置的高级类型 InstanceType 即可

const modal = ref<InstanceType<typeof MyModal> | null>(null)

存在问题： template 中使用无问题，但是在 TS 文件中使用 无法正常读取。