Vue 3 备忘清单

Vue 是一套用于构建用户界面的渐进式框架

• Vue 3.x 官方文档 (cn.vuejs.org)
• Vue Router 4.x 官方文档 (router.vuejs.org)
• Vue 2 备忘清单

注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const { createApp, ref } = Vue
  createApp({
    setup() {
      const message = ref("Hello Vue3")
      return {
        message
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message, ref }}</div>
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    setup() {
      const message = ref("Hello Vue3")
      return {
        message
      }
    }
  }).mount('#app')
</script>

<span>Message: {{ msg }}</span>

使用的是 Mustache 语法 (即双大括号)，每次 msg 属性更改时它也会同步更新

<div v-bind:id="dynamicId"></div>

简写

<div :id="dynamicId"></div>

<button :disabled="isButtonDisabled">
  Button
</button>

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

<p v-if="seen">Now you see me</p>

<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>

<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JS 表达式被动态执行

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething">

<form @submit.prevent="onSubmit">
  ...
</form>

.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

v-on:submit.prevent="onSubmit"
──┬─ ─┬──── ─┬─────  ─┬──────
  ┆   ┆      ┆        ╰─ Value 解释为JS表达式
  ┆   ┆      ╰─ Modifiers 由前导点表示
  ┆   ╰─ Argument 跟随冒号或速记符号
  ╰─ Name 以 v- 开头使用速记时可以省略

<div>{{ state.count }}</div>

import { defineComponent, reactive } from 'vue';

// `defineComponent`用于IDE推导类型
export default defineComponent({
  // setup 用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 });

    // 暴露 state 到模板
    return {
      state
    };
  },
});

<button @click="increment">
  {{ state.count }}
</button>

import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({ count: 0 });

    function increment() {
      state.count++;
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    };
  },
})

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

setup 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时

<script setup>
import { ref, computed } from 'vue';

const text = ref('')
// computed 的回调函数里
// 会根据已有并用到的状态计算出新的状态
const capital = computed(function(){
  return text.value.toUpperCase();
})
</script>

<template>
  <input v-model="text" />
  <p>to capital: {{ capital }}</p>
</template>

<script setup>
import { defineProps } from 'vue';

// 这里可以将 `username` 解构出来，
// 但是一旦解构出来再使用，就不具备响应式能力
defineProps({
  username: String
})
</script>

<template>
  <p>username: {{ username }}</p>
</template>

子组件定义需要的参数

<script setup>
const username = 'vue'
</script>

<template>
  <children :username="username" />
</template>

父组件参入参数

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['search'])
const keyword = ref('')
const onSearch = function() {
  emit('search', keyword.value)
}
</script>

<template>
  <input v-model="keyword" />
  <button @click="onSearch">search</button>
</template>

子组件定义支持 emit 的函数

<script setup>
const onSearch = function(keyword){
  console.log(keyword)
}
</script>

<template>
  <children @search="onSearch" />
</template>

父组件绑定子组件定义的事件

<script setup>
import { defineExpose, ref } from 'vue';

const keyword = ref('')
const onSearch = function() {
  console.log(keyword.value)
}

defineExpose({ onSearch })
</script>

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

子组件对父组件暴露方法

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

const childrenRef = ref(null)
const onSearch = function() {
  childrenRef.value.onSearch()
}
</script>

<template>
  <children ref='childrenRef' />
  <button @click="onSearch">search</button>
</template>

父组件调用子组件的方法

import type { InjectionKey, Ref } from 'vue'

export const ProvideKey = Symbol() as InjectionKey<Ref<string>>

在应用中使用 ProvideKey

<script setup lang="ts">
import { provide, ref } from 'vue'
import { ProvideKey } from './types'

const text = ref<string>('123')
provide(ProvideKey, text)
</script>

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

父组件为后代组件提供数据

<script setup lang="ts">
import { inject } from 'vue'
import { ProvideKey } from './types'

const value = inject(ProvideKey)
</script>

<template>
  <h4>{{value}}</h4>
</template>

后代组件注入父组件提供的数据

import VueRouter from 'vue-router'
// 引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes: [
    path: '/about',
    component: About
    path: '/home',
    component: Home
  ]
})
// 暴露 router
export default router

实现切换（active-class可配置高亮样式）

<router-link
  active-class="active"
  to="/about">
  About
</router-link>

指定展示位置

<router-diew></router-view>

几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
• 每个组件都有自己的$route属性，里面存储着自己的路由信息。
• 整个应用只有一个router，可以通过组件的srouter 属性获取到。

routes:[
    { path:'/about', component:AboutBody },
    {
        path:'/home',
        component:HomeBody,
        children:[
            { path:'news', component:HomeChild },
            { 
              path:'message',
              component:HomeChild1,
              //多级路由
              children:[
                  { name:'richu', path:'mes', component:HomeMessage }
              ]
            }
        ]
    }
]

使用

<router-link :to="{ 
  name:'',
  path:'/home/message/mes',
​  query:{ id:item.id,title:item.mes }
}">

路由的props配置

{
  name: 'xiangqing',
  path:'detail/:id',
  component:Detail
}

作用：让路由组件更方便的收到参数

//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detai1组件
// props:{a:900]
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detai1组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
  return {
    id:route.query.id,
    title:route.query.title
  }
}

<router-link> 的 replace 属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
3. 如何开启replace 模式： push 是追加历史记录,replace 是替换当前记录[路由跳转时候 <router-link replace>News\</router-link>]

作用：不借助router-link实现路由跳转，让跳转更加灵活

this.$router.push({
    name:'xiangqing',
    params:{
        id: xxx,
        title: xxx
        // 实现路由跳转，让路由跳转更加灵活
    }
})
this.$router.replace({
    name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward();
this.$router.back();
this.$router.go(3);

让不展示的路由组件保持挂载，不被销毁，示例：

<keep-alive include="news">
    <router-view></router-view>
</keep-alive>

• include 里面写模块名,用于保存指定的模块

作用：路由组件独有的，用于捕获路由组件的激活状态

• activated 路由组件被激活时触发
• deactivated 路由组件失活时触发

route.beforeEach((from,to,next)=>{
    if (to.meta.isAuth){
        alert("1");
        next();
    }else{
        next();
    }
})

前置路由

route.afterEach((from,to)=>{
    console.log(to);
    document.title=from.meta.title;
})

后置路由

{
    path:'news',
    component:HomeChild,
    meta:{title:"新闻"},
        beforeEnter: (from,to,next)=>{

        }
},

独享路由守卫只有前置路由守卫没有后置路由守卫

通过路由规则，进入该组件时被调用

beforeRouteEnter (to, from, next) {
    // ...
}

通过路由规则，离开组件时被调用

beforeRouteLeave (to, from, next) {
    // ...
}

<script setup lang="ts">
// 运行时
const emit = defineEmits(['change', 'update'])

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

ref 会根据初始化时的值推导其类型：

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')

year.value = 2020 // 成功！

import { reactive } from 'vue'

interface Book {
  title: string
  year?: number
}

const book: Book = reactive({
  title: 'Vue 3 指引'
})

你还可以通过泛型参数显式指定类型：

const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
})

import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'

const key = Symbol() as InjectionKey<string>
// 若提供的是非字符串值会导致错误
provide(key, 'foo')
// foo 的类型：string | undefined
const foo = inject(key)

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const el = ref<HTMLInputElement | null>(null)

onMounted(() => {
  el.value?.focus()
})
</script>

<template>
  <input ref="el" />
</template>

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const isContentShown = ref(false)
const open = 
      () => (isContentShown.value = true)

defineExpose({
  open
})
</script>

使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'

type Modal = InstanceType<typeof MyModal>

const modal = ref<Modal | null>(null)

const openModal = () => {
  modal.value?.open()
}
</script>

import { defineComponent } from 'vue'

type Payload = { bookName: string }

export default defineComponent({
  emits: {
    addBook(payload: Payload) {
      // 执行运行时校验
      return payload.bookName.length > 0
    }
  },
  methods: {
    onSubmit() {
      this.$emit('addBook', {
        bookName: 123 // 类型错误
      })
      // 类型错误
      this.$emit('non-declared-event')
    }
  }
})

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleChange(event: Event) {
      console.log((event.target as HTMLInputElement).value)
    }
  }
})

某些插件，比如 vue-router，提供了一些自定义的组件选项，比如 beforeRouteEnter：

import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // ...
  }
})

如果没有确切的类型标注，这个钩子函数的参数会隐式地标注为 any 类型。我们可以为 ComponentCustomOptions 接口扩展自定义的选项来支持：

import { Route } from 'vue-router'

declare module 'vue' {
  interface ComponentCustomOptions {
    beforeRouteEnter?(
      to: Route,
      from: Route,
      next: () => void
    ): void
  }
}