前言
清明3日假期对Vue3进行了较为系统的使用,本文会总结出对Vue3最新语法的实践,只会记录自己项目中使用到的语法,如果希望细致的过一遍Vue3的API,建议阅读官方文档。
对于官方文档,较好的方式是粗略过一遍官方文档,知道有这个东西,日后使用时,再回头来查阅,但前端工具之多,很多文档也读不完,此时我个人会以较新的开源项目作为学习对象,将其中使用的语法、技巧结合着文档学习。
此外感到难受的一点是,当时学React被它的Hooks恶心到了,但最近几天较为系统的了解了Vue3后,发现Vue3其实也往Hooks的路上走,当时React Hooks刚出,我就去学,除文档外,没啥资料,最终一知半解,在项目中用的少,现在Vue3已经出了一段时间了,而且国内很多资料,估计学起来,不会太费劲。
script setup语法糖
Vue3重要特点之一就是推出了Composition API写法,相比于Vue2是的Options API形式,基于Composition API组织的代码会很更加易于阅读与理解,相似功能的逻辑会放在一块,具体如下:
Vue3中通过setup函数来实现Composition API的写法,setup函数默接受props和context两个参数,其实现方式如下:
<script lang="ts">
export default {
setup() {
const name = "二两"
return {
// 需要将name暴露出去,template中才可以使用
name
}
}
}
</script>
<template>
<h1>{
{name}}</h1>
</template>
当项目比较复杂时,setup函数必须要通过return将元素暴露出去的写法其实会比较麻烦,在Vue3.2时,推出了<script setup>
语法糖,任何在 <script setup>
声明的顶层的绑定 (包括变量,函数声明以及 import 引入的内容) 都能在模板中直接使用,例子如下:
<script setup lang="ts">
import { ref } from 'vue';
const name: string = "二两"
</script>
<template>
<h1>{
{name}}</h1>
</template>
此外,普通的<script>
只在组件首次被引入时执行一次,而<script setup>
中的代码会在组件每次实例化是都执行。
在实际使用时,我遇到的一个问题是,怎么获得旧写法(setup函数写法)中的props和emit?其中props用于获得父组件传递下的数据,emit用于将子组件的数据传递给父组件。在<script setup>
中需