ref()

import { ref } from 'vue'

const count = ref(0)
const arr = ref<string[]>([])

count.value++
arr.push('sbc')

console.log(arr.value)

computed()

import { ref } from 'vue'

const count = ref(4)
const plus = computed(() => count.value * 4)

console.log(plus.value)

reactive()

import { reactive } from 'vue'

const obj = reactive({ count: 0 })
obj.count++

console.log(obj)

readonly()

import { readonly, reactive } from 'vue'

const obj = reactive({ count: 0 })
obj.count++

const copy = readonly(obj)

console.log(copy)

watchEffect()

import { ref, watchEffect } from 'vue'

const count = ref(0)
count.value++

const stop = watchEffect(() => console.log(count.value))
stop()

watch()

import { reactive, watch } from 'vue'

const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  },
)

defineProps()

<script setup> 中不需要导入

const props = defineProps({
  foo: String,
})

defineEmits()

<script setup> 中不需要导入

const emit = defineEmits(['change', 'delete'])

defineExpose()

<script setup> 中不需要导入

import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b,
})

useSlots()

import { useSlots } from 'vue'

const slots = useSlots()

useAttrs()

import { useSlots } from 'vue'

const attrs = useAttrs()

provide()

提供一个值，可以被后代组件注入。

import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 提供静态值
provide('foo', 'bar')

// 提供响应式的值
const count = ref(0)
provide('count', count)

// 提供时将 Symbol 作为 key
provide(fooSymbol, count)

inject()

注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

import { inject } from 'vue'

// 注入值的默认方式
const foo = inject('foo')

// 注入响应式的值
const count = inject('count')

使用组件

<script setup>
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

生命周期钩子

import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted')
})

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

Pinia useStore()

import { defineStore } from 'pinia'

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0,
  }),
})

const store = useStore()

store.counter++

vue-router useRouter

import { useRouter } from 'vue-router'

const router = useRouter()

router.push({
  name: index,
})

vue-router useRoute

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.name)

JSX 渲染

暂时没看到 <script setup /> 写法可以使用 JSX，只能结合选项式写法的 setup() {} 来使用。

<script lang="jsx">
  import { ref } from 'vue'

  export default {
    setup() {
      const count = ref(100)
      return () => <div>count is: {count.value}</div>
    },
  }
</script>

<style lang="scss" scoped></style>

不过如要要使用 JSX 就需要配置下。

npm i @vitejs/plugin-vue-jsx -D

// vue.config.js
import vueJsx from '@vitejs/plugin-vue-jsx' // 配置vue使用jsx

export default defineConfig({
  plugins: [vue(), vueJsx()],
})