Vue3

Official Home

VueUse

State Library：Pinia

LifeCycleHooks

onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch()

CustomRef

可利用CustomRef实现自定义ref，如自带debounce的Ref

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track() //收集依赖
        return value //返回数据
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue //赋值
          trigger() //触发依赖更新
        }, delay)
      }
    }
  })
}

Provide/Inject

App-level Provide​

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* key */ 'message', /* value */ 'hello!')

provide

<script setup>
import { provide } from 'vue'

provide(/* key */ 'message', /* value */ 'hello!')
</script>

inject

<script setup>
import { inject } from 'vue'

const message = inject('message')

// `value` will be "default value"
// if no data matching "message" was provided
const value = inject('message', 'default value')

// In some cases, the default value may need to be created by calling a function or instantiating a new class. 
//To avoid unnecessary computation or side effects in case the optional value is not used,
// we can use a factory function for creating the default value:
//The third parameter indicates the default value should be treated as a factory function.
const value = inject('key', () => new ExpensiveClass(), true)

</script>

SFC CSS Features

<script setup>

<script setup>
import MyComponent from './MyComponent.vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
import { ref } from 'vue'

const count = ref(0)

const vMyDirective = {
  beforeMount: (el) => {
    // do something with the element
  }
}

</script>

<template>
  <MyComponent />
  <button @click="count++">{{ count }}</button>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
  <h1 v-my-directive>This is a Heading</h1>
</template>

// APIs
defineProps() & defineEmits()
defineModel() 
defineExpose()
defineOptions()
defineSlots()
useSlots() & useAttrs()

CSS Modules​

<template>
  <p :class="$style.red">This should be red</p> <!--3.use as $style.red -->
</template>

<style module> /*1.specified as module */
.red { /*2.equals $style.red */
  color: red;
}
</style>

Custom Inject Name​

<template>
  <p :class="classes.red">red</p>  <!--2.use as classes.red -->
</template>

<style module="classes"> /*1.specified as module named classes */
.red {
  color: red;
}
</style>

v-bind() in CSS

<script setup>
const theme = { 
  color: 'red'
} 
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');  /*通过v-bind绑定字符串形式属性名：'theme.color' */ 
}
</style>

Warning

WARNING

1. watchEffect could only collect variables in sync codes