10个常见的使用场景，助你从 Vue2 丝滑过渡到 Vue3 !-六虎

本文为稀土技术社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！

信任有很多这样的兄弟，学了 Vue3 的各种 API 和新特性，但公司项目仍然运用的是 Vue2 ，也不知道自己的水平能否上手 Vue3 项目。其实你学的是琐细的知识点，短少真实的运用场景。

今日就把实战过程中遇到的十个场景分享给咱们，结合尤大大引荐的 <script setup>，期望你能从 Vue2 丝滑过渡到 Vue3！

场景一：父子组件数据传递

父组件数据传递到子组件

Vue3 中父组件同样是经过特点传递数据，但子组件接受数据的办法和 Vue2 不同。在 <script setup>中，props 需求运用defineProps()这个宏函数来进行声明，它的参数和 Vue2 props 选项的值是一样的。

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
</script>
<template>
  <ChildView some-prop="parent message" />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps({
  someProp: {
    type: String,
    required: true
  }
})
console.log(props.someProp) // parent message
</script>
<template>
  <!-- 运用 someProp 或 props.someProp -->
  <div>{{ someProp }}</div>
  <div>{{ props.someProp }}</div>
</template>

留意：defineProps 、defineEmits 、 defineExpose 和 withDefaults这四个宏函数只能在<script setup>中运用。他们不需求导入，会随着<script setup>的处理过程中一同被编译。

子组件数据传递到父组件

Vue2 中子组件数据传递到父组件，通常是运用 $emit 触发一个自界说事情来进行传递。但 $emit 无法在 <script setup> 中运用，这时候咱们需求运用 defineEmits()：

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['someEvent'])
function onClick() {
  emit('someEvent', 'child message')
}
</script>
<template>
  <button @click="onClick">点击</button>
</template>

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
function someEvent(value) {
  console.log(value) // child message
}
</script>
<template>
  <ChildView @some-event="someEvent" />
</template>

父组件运用子组件数据

在<script setup> 中，组件的特点和办法默许都是私有的。父组件无法访问到子组件中的任何东西，除非子组件经过defineExpose显式的露出出去：

<!-- 子组件 -->
<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3!')
function change() {
  msg.value = 'hi vue3!'
  console.log(msg.value)
}
// 特点或办法必须露出出去，父组件才干运用
defineExpose({ msg, change })
</script>

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
import { ref, onMounted } from 'vue'
const child = ref(null)
onMounted(() => {
  console.log(child.value.msg) // hello vue3!
  child.value.change() // hi vue3!
})
</script>
<template>
  <ChildView ref="child"></ChildView>
</template>

场景二：组件之间双向绑定

咱们都知道 Vue2 中组件的双向绑定选用的是 v-model 或 .snyc 修饰符，两种写法多少显得有点重复，所以在 Vue3 中合成了一种。Vue3 统一运用 v-model 进行处理，而且能够和多个数据进行绑定，如 v-model:foo、v-model:bar。

v-model 等价于 :model-value="someValue" 和 @update:model-value="someValue = $event"

v-model:foo 等价于 :foo="someValue" 和 @update:foo="someValue = $event"

下面便是一个父子组件之间双向绑定的比如：

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
import { ref } from 'vue'
const msg = ref('hello vue3!')
</script>
<template>
  <ChildView v-model="msg" />
</template>

<!-- 子组件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <div @click="emit('update:modelValue', 'hi vue3！')">{{ modelValue }}</div>
</template>

子组件能够结合 input 运用：

<!-- 子组件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />
</template>

假如你觉得上面的模板比较繁琐，也能够结合 computed 一同运用：

<!-- 子组件 -->
<script setup>
import { computed } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const newValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>
<template>
  <input v-model="newValue" />
</template>

场景三：路由跳转，获取路由参数

在 Vue2 中咱们通常是运用 this.$router 或this.$route 来进行路由的跳转和参数获取，但在<script-setup>中，是这些办法无法运用的。咱们能够运用 vue-router 提供的useRouter 办法，来进行路由跳转：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function onClick() {
  router.push({
    path: '/about',
    query: {
      msg: 'hello vue3!'
    }
  })
}
</script>

当咱们要获取路由参数时，能够运用vue-router 提供的useRoute办法：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.msg) // hello vue3!
</script>

场景四：获取上下文目标

Vue3 的 setup 中无法运用 this 这个上下文目标。或许刚触摸 Vue3 的兄弟会有点懵，我想运用 this 上的特点和办法应该怎么办呢。虽然不引荐这样运用，但仍然能够经过 getCurrentInstance 办法获取上下文目标：

<script setup>
import { getCurrentInstance } from 'vue'
// 以下两种办法都能够获取到上下文目标
const { ctx } = getCurrentInstance()
const { proxy }  = getCurrentInstance()
</script>

这样咱们就能够运用 $parent 、$refs 等，干自己想干的事情了，下面是我打印出来的 ctx 的完整特点。

留意：ctx 只能在开发环境运用，生成环境为 undefined 。引荐运用 proxy ，在开发环境和生产环境都能够运用。

场景五：插槽的运用

在 Vue2 的中一般是经过 slot 特点指定模板的方位，经过 slot-scope 获取效果域插槽的数据，如：

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
</script>
<template>
  <div>parent<div>
  <ChildView>
    <template slot="content" slot-scope="{ msg }">
      <div>{{ msg }}</div>
    </template>
  </ChildView>
</template>

<!-- 子组件 -->
<template>
  <div>child</div>
  <slot name="content" msg="hello vue3!"></slot>
</template>

在 Vue3 中则是经过 v-slot 这个指令来指定模板的方位，一同获取效果域插槽的数据，如：

<!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
</script>
<template>
  <div>parent</div>
  <ChildView>
    <template v-slot:content="{ msg }">
      <div>{{ msg }}</div>
    </template>
  </ChildView>
</template>
<!-- ChildView 也能够简写为： -->
<ChildView>
  <template #content="{ msg }">
    <div>{{ msg }}</div>
  </template>
</ChildView>

<!-- 子组件 -->
<template>
  <div>child</div>
  <slot name="content" msg="hello vue3!"></slot>
</template>

留意：v-slot 在 Vue2 中也能够运用，但必须是 Vue2.6+ 的版别。

场景六：缓存路由组件

缓存一般的动态组件，Vue3 和 Vue2 的用法是一样的，都是运用 KeepAlive 包裹 Component。但缓存路由组件，Vue3 需求结合插槽一同运用：

// Vue2 中缓存路由组件
<KeepAlive>
  <RouterView />
</KeepAlive>

// Vue3 中缓存路由组件
<RouterView v-slot="{ Component }">
  <KeepAlive>
    <Component :is="Component"></Component>
  </KeepAlive>
</RouterView>

一个持续存在的组件能够经过onActivated() 和onDeactivated()两个生命周期钩子注入相应的逻辑：

<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
  // 调用机遇为初次挂载
  // 以及每次从缓存中被重新插入时
})
onDeactivated(() => {
  // 调用机遇为从 DOM 上移除、进入缓存
  // 以及组件卸载时
})
</script>

场景七：逻辑复用

Vue2 中逻辑复用主要是选用 mixin，但 mixin 会使数据来源不明，一同会引起命名抵触。所以 Vue3 更引荐的是全新的 Composition Api。

下面是鼠标盯梢的比如，咱们能够把逻辑提取出来：

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 依照常规，组合式函数名以 use 最初
export function useMouse() {
  // 组合式函数办理的数据
  const x = ref(0)
  const y = ref(0)
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 组合式函数能够挂靠在所属组件的生命周期上，来发动和卸载副效果
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  // 经过返回值露出所办理的数据
  return { x, y }
}

这时候在组件中咱们就能够直接运用 mouse.js 露出的数据了。

<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>

咱们还能够在一个组件中引进多个组合式函数，或许在一个组合式函数中引进其他的组合式函数，这个比较简单，我就不演示了。接下来，咱们看看运用异步办法的组合式函数。

在做异步数据请求时，咱们通常需求处理三个不同的状况：加载中、加载成功和加载失利。获取这些状况的逻辑是通用的，咱们能够把它提取出来：

// request.js
import { ref } from 'vue'
export function useRequest(url) {
  const data = ref(null)
  const error = ref(null)
  axios.get(url)
    .then((res) => (data.value = res.data))
    .catch((err) => (error.value = err))
  return { data, error }
}

现在咱们在组件中只需求：

<script setup>
import { useRequest } from './request.js'
const { data, error } = useRequest('http://...')
</script>
<template>
  <div v-if="data">Data is: {{ data }}</div>
  <div v-else-if="error">Error message is: {{ error.message }}</div>
  <div v-else>Loading...</div>
</template>

任何组件都能够运用上面这个逻辑，这便是逻辑复用。是不是能够节省很多重复的代码，感觉摸鱼时刻又要增加了~

场景八：生命周期

Vue3 的生命周期和 Vue2 相比，有以下改动：

Vue3生命周期钩子都以on最初，而且需求在组件中手动导入。

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('onMounted')
})
</script>

Vue3 取消了beforeCreate和created钩子。假如需求在组件创立前注入逻辑，直接在 <script setup> 中编写同步代码就能够了。假如这几个钩子一同存在，setup 的履行次序要优先于 beforeCreate和created。
Vue3 中组件卸载的钩子名称有变化，beforeDestroy改为onBeforeUnmount，destroyed改为onUnmounted。

场景九：大局 API

Vue2 中的大局特点或大局办法，是在构造函数 Vue 的原型目标上进行增加，如：Vue.prototype.$axios=axios 。但在 Vue3 中，需求在 app 实例上增加：

// main.js
app.config.globalProperties.$axios = axios

在组件中运用：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$axios.get('http://...')
</script>

Vue3 中其他的大局 API，如 directive 、component 等，跟 Vue2 的用法都差不多，只不过一个是在 Vue 上调用，一个是在 app 实例上调用：

// main.js
// 大局自界说指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})
// 大局自界说组件
import CustomComp from './components/CustomComp.vue'
app.component('CustomComp', CustomComp)

需求留意的是，Vue3 废弃了 filter 这个办法，由于经过函数或 computed 能够实现一样的功能。

常见十：与 TypeScript 结合运用

与 TypeScript 结合运用，咱们只需求在 <script setup> 中增加 lang="ts" 就能够了。下面是一些和 TypeScript 结合运用的比如。

为 props 标示类型

运行时声明。当运用 <script setup> 时，defineProps() 宏函数支撑从它的参数中推导类型：
```
<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})
props.foo // string
props.bar // number | undefined
</script>
```
这被称为 运行时声明 ，由于传递给 defineProps() 的参数会作为运行时的 props 选项运用。
基于类型的声明。咱们还能够经过泛型参数来界说 props 的类型，这种办法愈加常用：
```
<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}
const props = defineProps<Props>()
</script>
```
这被称为基于类型的声明，编译器会尽或许地测验依据类型参数推导出等价的运行时选项。这种办法的不足之处在于，失去了界说 props 默许值的能力。为了解决这个问题，咱们能够运用withDefaults宏函数：
```
<script setup lang="ts">
interface Props {
  msg?: string
  labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello vue3!',
  labels: () => ['one', 'two']
})
</script>
```

为 ref() 标示类型

默许推导类型。ref 会依据初始化时的值自动推导其类型：

import { ref } from 'vue'
const year = ref(2022)
year.value = '2022' // TS Error: 不能将类型 string 分配给类型 number

经过接口指定类型。有时咱们或许想为 ref 内的值指定一个更复杂的类型，能够运用 Ref 这个接口：

import { ref } from 'vue'
import type { Ref } from 'vue'
const year: Ref<string | number> = ref('2022')
year.value = 2022 // 成功！

经过泛型指定类型。咱们也能够在调用 ref() 时传入一个泛型参数，来掩盖默许的推导行为：
```
const year = ref<string | number>('2022')
year.value = 2022 // 成功！
```

为 reactive() 标示类型

默许推导类型。reactive() 也会隐式地从它的参数中推导类型：

import { reactive } from 'vue'
const book = reactive({ title: 'Vue 3 指引' })
book.year = 2022 // TS Error: 类型 { title: string; } 上不存在特点 year

经过接口指定类型。要显式地指定一个 reactive 变量的类型，咱们能够运用接口：

import { reactive } from 'vue'
interface Book {
  title: string
  year?: number
}
const book: Book = reactive({ title: 'Vue 3 指引' })
book.year = 2022 // 成功！

其他 API 与 TypeScript 结合运用的办法和上面大同小异，这里我就不一一列举了。详细能够参阅这篇文章：如何为 Vue3 组件标示 TS 类型，看这个就够了！。

小结

以上便是我在 Vue3 项目中遇到最多的场景，假如你把握了 Vue3 常用的 API 和今日这些场景，信任参加 Vue3 项目的开发是没有问题了。当然假如要用好 Vue3 ，或许还需求对 Pinia 、 Vite 等相关生态有一个深入的了解。后边我也会持续分享 Vue3 的运用技巧及相关生态，期望你尽早把握 Vue3！

有问题欢迎在谈论区留言，假如觉得今日的分享对你有所帮助，记得点赞支撑一下！

参阅文档：Vue3 官网

10个常见的使用场景，助你从 Vue2 丝滑过渡到 Vue3 !