Vue3文档备忘

工具链

eslint-plugin-vue: 官方eslint插件
Volar
Prettier
playground
Vite
Vue Router
Pinia
Vitest
VueUse: 组合式 API社区

性能优化

tree-shaking
异步组件
props稳定性
v-once
v-memo
虚拟列表
通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应
如果你在代码中只使用了组合式 API，那么你可以通过配置编译时标记来去掉 Vue 运行时中针对选项式 API 支持的代码，从而减小生产包大概几 kb 左右的体积。注意这个配置也会影响你依赖中的 Vue 组件。(注意：inheritAttrs)

// vite.config.js
define: {
  __VUE_OPTIONS_API__ : false
}

v-model

另一种在组件内实现 v-model 的方式

<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" />
</template>

与外部状态系统集成

将外部状态放在一个 shallowRef 中。一个浅层的 ref 中只有它的 .value 属性本身被访问时才是有响应性的，而不关心它内部的值。当外部状态改变时，替换此 ref 的 .value 才会触发更新

不可变数据

immer

// immer.js
import produce from 'immer'
import { shallowRef } from 'vue'

export function useImmer(baseState) {
  const state = shallowRef(baseState)
  const update = (updater) => {
    state.value = produce(state.value, updater)
  }

  return [state, update]
}

// App.vue
<script setup>
import { useImmer } from './immer.js'

const [items, updateItems] = useImmer([
  {
     title: "Learn Vue",
     done: true
  },
  {
     title: "Use Vue with Immer",
     done: false
  }
])

function toggleItem(index) {
  updateItems(items => {
    items[index].done = !items[index].done
  })
}
</script>

<template>
  <ul>
    <li v-for="({ title, done }, index) in items"
        :class="{ done }"
        @click="toggleItem(index)">
        {{ title }}
    </li>
  </ul>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

状态机：

XState

// machine.js
import { createMachine, interpret } from 'xstate'
import { shallowRef } from 'vue'

export function useMachine(options) {
  const machine = createMachine(options)
  const state = shallowRef(machine.initialState)
  const service = interpret(machine)
    .onTransition((newState) => (state.value = newState))
    .start()
  const send = (event) => service.send(event)

  return [state, send]
}

// App.vue
<script setup>
import { useMachine } from './machine.js'

const [state, send] = useMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
})
</script>

<template>
  <button @click="send('TOGGLE')">
    {{ state.matches("inactive") ? "Off" : "On" }}
  </button>
</template>

RxJS

RxJS @vueuse/rxjs

动画

Transition

先执行离开动画，然后在其完成之后再执行元素的进入动画。我们可以通过向 <Transition> 传入一个 mode属性mode="out-in"来实现这个行为 (组件/元素切换)
在同一个元素上同时使用animation和transition, 此时你需要显式地传入 type 属性来声明，告诉 Vue 需要关心哪种类型（两个动画时长不同，一般选时间较长的那个）
appear: 初次渲染时应用一个过渡效果
自定义过渡 class 在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用（优先级高于自定义类名）（Animate.css）
JavaScript 钩子 : 在使用仅由 JavaScript 执行的动画时，最好是添加一个 :css="false" 属性
- GSAP
- Motion One

自定义REF

// demo:对ref值变化进行防抖处理
import { customRef } from 'vue'

export default function (value, delay = 500) {
  let timer = null

  return customRef((track, trigger)=>{
    return {
      get() {
        track();
        return value
      },
      set(newValue) {
        clearTimeout(timer)
        timer = setTimeout(()=>{
          value = newValue;
          trigger()
        }, delay)
      }
    }
  })
}

watchEffect

清除副作用

在侦听函数中执行网络请求，在网络请求还没达到的时候，我们停止了侦听器或者侦听函数被再次执行，那么上一次的网络请求应该被取消

// watchEffect传入的函数的参数
const stopWatch = watchEffect((onInvalidate)=>{
  console.log('watchEffect执行')
  const timer = setTimeout(()=>{
    console.log('模拟网络请求')
  })
  onInvalidate(()=>{
    clearTimeout(timer)
  })
})

获取dom元素

// dom挂载完再执行
<div ref="title">123</div>

const title = ref(null)
watchEffect(()=>{
  console.log(title.value)
},{
  flush: "post"
})

provide/inject

通过provide提供可变数据时，记得使用readonly包裹提供的数据，防止其被子组件修改

import { provide, ref, readonly } from 'vue'
const name = ref('abc')
provide('name', readonly(name))

sleepyShen1989 / blog

【复习】Vue3文档备忘 #15