助你从Vue2过渡到Vue3的常见使用场景
前言
相信有很多人已经学习了 Vue3 的 API 和 新特性，但是令人头疼的是工作中依然使用的是 Vue2，也不知道自己的水平能否上手 Vue3 项目，今天把实践过程中常见使用场景分享给大家，希望对你们有所帮助。
场景一：父子组件数据传递
父组件数据传递到子组件
Vue3 中父组件同样是通过属性传递数据，但子组件接受数据的方式和 Vue2 不同。在 < script setup > 中，props 需要使用 defineProps() 这个宏函数来进行声明，它的参数和 Vue2 props 选项的值是一样的。
<!-- 父组件 -->
<script setup>
import myChild from './myChild.vue'
</script>
<template>
<myChild :some-prop="parent message" />
</template>
<!-- 子组件 -->
<script setup>
const props = defineProps({
childProp: {
type: String,
required: true
}
})
// parent message
console.log(props.childProp)
</script>
<template>
<!-- 使用 childProp 或 props.childProp -->
<div>{{ childProp }}</div>
<div>{{ props.childProp }}</div>
</template>
注意：defineProps 、defineEmits 、 defineExpose 和 withDefaults 这四个宏函数只能在 <script setup> 中使用。他们不需要导入，会随着 <script setup> 的处理过程中一起被编译。
子组件数据传递到父组件
Vue2 中子组件数据传递到父组件，通常是使用 $emit 触发一个自定义事件来进行传递。但 $emit 无法在 < script setup > 中使用，这时候我们需要使用 defineEmits()：
<!-- 子组件 -->
<script setup>
const emit = defineEmits(['childEvent'])
function onClick() {
emit('childEvent', 'child message')
}
</script>
<template>
<button @click="onClick">点击</button>
</template>
<!-- 父组件 -->
<script setup>
import myChild from './myChild.vue'
function childEvent(value) {
// child message
console.log(value)
}
</script>
<template>
<ChildView @child-event="childEvent" />
</template>
父组件使用子组件数据
在 < script setup > 中，组件的属性和方法默认都是私有的。父组件无法访问到子组件中的任何东西，除非子组件通过 defineExpose 显式的暴露出去：
<!-- 子组件 -->
<script setup>
import { ref } from 'vue'
const msg = ref('vue3!')
function change() {
msg.value = 'hi vue3!'
}
// 属性或方法必须暴露出去，父组件才能使用
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 myChild from './myChild.vue'
import { ref } from 'vue'
const msg = ref('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: '/hone',
query: {
msg: 'earth'
}
})
}
</script>
当我们要获取路由参数时，可以使用 vue-router 提供的 useRoute 方法：
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.msg)
</script>
场景四：获取上下文对象
Vue3 的 setup 中无法使用 this 这个上下文对象。可能刚接触 Vue3 的兄弟会有点懵，我想使用 this 上的属性和方法应该怎么办呢。虽然不推荐这样使用，但依然可以通过 getCurrentInstance 方法获取上下文对象：
<script setup>
import { getCurrentInstance } from 'vue'
// 以下两种方式都可以获取到上下文对象
const { ctx } = getCurrentInstance()
const { proxy } = getCurrentInstance()
</script>
值得注意的是 ctx 只能在开发环境使用，生成环境为 undefined 。 推荐使用 proxy ，在开发环境和生产环境都可以使用。
其他 API 与 TypeScript 结合使用的方法和上面大同小异，具体可以参考这篇文章： 何为 Vue3 组件标注 TS 类型，看这篇文章就够了！
场景五：插槽的使用
在 Vue2 的中一般是通过 slot 属性指定模板的位置，通过 slot-scope 获取作用域插槽的数据，如：
<script setup>
import myChild from './myChild.vue'
</script>
<template>
<div>parent<div>
<ChildView>
<template slot="content" slot-scope="{ msg }">
<div>{{ msg }}</div>
</template>
</ChildView>
</template>
在 Vue3 中则是通过 v-slot 这个指令来指定模板的位置，同时获取作用域插槽的数据，如：
<!-- 父组件 -->
<script setup>
import myChild from './myChild.vue'
</script>
<template>
<div>parent</div>
<ChildView>
<template v-slot:content="{ msg }">
<div>{{ msg }}</div>
</template>
</ChildView>
</template>
<!-- 子组件 -->
<template>
<div>child</div>
<slot name="content" msg="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>
场景七：生命周期
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 项目的开发是没有问题了。
- Author: 未来可期
- Link: http://shansec.github.io/post/blog/%E5%8A%A9%E4%BD%A0%E4%BB%8EVue2%E8%BF%87%E6%B8%A1%E5%88%B0Vue3%E7%9A%84%E5%B8%B8%E8%A7%81%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/
- License: This work is under a 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. Kindly fulfill the requirements of the aforementioned License when adapting or creating a derivative of this work.